---
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 mr='12px' mb='12px'>
    Click Me
  </Button>
  <Button mr='12px' mb='12px' primary>
    Click Me
  </Button>
  <Button mr='12px' mb='12px' safety>
    Click Me
  </Button>
  <Button mr='12px' mb='12px' danger>
    Click Me
  </Button>
  <Button mr='12px' mb='12px' disabled>
    Don't Click Me
  </Button>
</Playground>

## Ghost Buttons

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