material-ui-bootstrap


npm version Build Status

npm install material-ui-bootstrap




Button
















import React from "react"
import { Button } from "material-ui-bootstrap"

export default function ButtonExample() {
  return (
    <Button variant="contained" color="info">Example</Button>
  )
}



Alert


Heading

Alert primary with a link.

Heading

Alert secondary with a link.

Heading

Alert success with a link.

Heading

Alert danger with a link.

Heading

Alert warning with a link.

Heading

Alert info with a link.

Heading

Alert light with a link.

Heading

Alert dark with a link.



Heading With Icon

You can drop in an icon to make helpful info boxes.

<Alert.Heading icon={<InfoIcon />}>



This is a dismissable one. This is a dismissable one. This is a dismissable one.



Control State

This is a dismissable one where you control the dismissed state externally.


  import React from "react"
  import { Alert, Button } from "material-ui-bootstrap"
  
  export default function AlertExample() {
    const [show, setShow] = React.useState(true)
    return (
      <>
        <Alert
          color="danger"
          dismissible
          show={show}
          onClose={() => setShow(false)}
        >
          <Alert.Heading>Control State</Alert.Heading>
          This is a dismissable one where you control the dismissed state
          externally.
        </Alert>
        <Button onClick={() => setShow(true)}>Show</Button>
        <Button onClick={() => setShow(false)}>Hide</Button>
      </>
    )
  }
  



Typography


primary

secondary

success

danger

warning

info

light

dark



  import React from "react"
  import { Typography } from "material-ui-bootstrap"
  
  export default function TypographyExample() {
    return <Typography color="success">Example</Typography>
  }



Card


CardHeader

Title

primary

CardHeader

Title

secondary

CardHeader

Title

success

CardHeader

Title

danger

CardHeader

Title

warning

CardHeader

Title

info

CardHeader

Title

light

CardHeader

Title

dark


  import React from "react"
  import Card, { CardContent, CardHeader, CardTitle } from "material-ui-bootstrap"
  
  export default function CardExample() {
    return (
      <Card color="success">
        <CardHeader>CardHeader</CardHeader>
        <CardContent>
          <CardTitle>Title</CardTitle>
          Example card content.
        </CardContent>
      </Card>
    )
  }