---
name: Button
route: /Button
menu: components
---

import { Playground, Props } from 'docz'
import { Button } from './'
import { Spacer } from '../Spacer'

# Button

<Props of={Button} />

## Usage

<Playground
  style={{
    backgroundColor: '#F4F6F9',
    margin: '-2em',
    padding: '2em',
    width: 'auto',
  }}
>
  <Button>Click Me</Button>
  <span style={{ marginRight: '12px', marginBottom: '48px' }} />
  <Button primary>Click Me</Button>
  <span style={{ marginRight: '12px', marginBottom: '48px' }} />
  <Button safety>Click Me</Button>
  <span style={{ marginRight: '12px', marginBottom: '48px' }} />
  <Button danger>Click Me</Button>
  <span style={{ marginRight: '12px', marginBottom: '48px' }} />
  <Button disabled>Don't Click Me</Button>
  <span style={{ marginRight: '12px', marginBottom: '48px' }} />
</Playground>

## Ghost Buttons

<Playground
  style={{
    backgroundColor: '#F4F6F9',
    margin: '-2em',
    padding: '2em',
    width: 'auto',
  }}
>
  <Button ghost>Click Me</Button>
  <span style={{ marginRight: '12px', marginBottom: '48px' }} />
  <Button ghost primary>
    Click Me
  </Button>
  <span style={{ marginRight: '12px', marginBottom: '48px' }} />
  <Button ghost safety>
    Click Me
  </Button>
  <span style={{ marginRight: '12px', marginBottom: '48px' }} />
  <Button ghost danger>
    Click Me
  </Button>
  <span style={{ marginRight: '12px', marginBottom: '48px' }} />
  <Button ghost disabled>
    Don't Click Me
  </Button>
  <span style={{ marginRight: '12px', marginBottom: '48px' }} />
</Playground>
