Button

Usage

import { Button } from 'matterial'

function ButtonExample() {
  return <Button onClick={() => console.log('I got clicked!')}>Click Me</Button>
}

Style Variants

<Button>Default</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="contained">Contained</Button>
<Button color="primary">Default</Button>
<Button color="primary" variant="outlined">Outlined</Button>
<Button color="primary" variant="contained">Contained</Button>

Colors

color = string

Loading Button

loading = boolean

Anchor Button

to = string

Create a button-like link.

<Button to="/">Home</Button>

Icon Button

<Button shape="circle"><Icon icon="Notification" /></Button>
<Button shape="circle" variant="outlined"><Icon icon="Notification" /></Button>
<Button shape="circle" variant="contained"><Icon icon="Notification" /></Button>
<Button shape="square" variant="outlined"><Icon icon="Notification" /></Button>
<Button shape="square" variant="contained"><Icon icon="Notification" /></Button>

Icon Button Content

<Button prepend={<Icon icon="Notification" />}>Alerts</Button>
<Button append={<Icon icon="Notification" />}>Alerts</Button>
<Button prepend={<Icon icon="Notification" />} append={<Icon icon="Notification" />}>So Many Alerts</Button>

Fixed Width

width = number | percent

Text will overflow or center on fixed-width buttons.

Sizes

size = "small" | "medium" | "large"