---
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',
  }}
>
  <Spacer.Box marginRight='12px' marginBottom='12px'>
    <Button>Click Me</Button>
    <Button primary>Click Me</Button>
    <Button safety>Click Me</Button>
    <Button danger>Click Me</Button>
    <Button disabled>Don't Click Me</Button>
  </Spacer.Box>
</Playground>

## Ghost Buttons

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