---
name: Button
route: /components/common/button
edit: false
---

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

# Button
**SUBCATEGORY:** Buttons

<hr />

## Button
### Description
For the principle action.

<Playground style={{ paddingRight: '50%',  display: 'flex', justifyContent: 'space-evenly' }}>
    <Button>Button</Button>
    <Button disabled>Button</Button>
    <Button icon>
        <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'>
           <path
             d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' />
         </svg>
    </Button>
</Playground>

<hr />

## Button (inverse)
### Description
For the principle action.

<Playground style={{ backgroundColor: "#333", margin: '-2em', padding: '2em 50% 2em 2em', display: 'flex', justifyContent: 'space-evenly' }}>
  <Button inverse>Button</Button>
  <Button inverse disabled>Button</Button>
  <Button inverse icon>
      <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'>
         <path
           d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' />
       </svg>
  </Button>
</Playground>

<hr />

## Button (secondary)
### Description
For secondary actions, and for additional options adjacent to a primary button.

<Playground style={{ paddingRight: '50%',  display: 'flex', justifyContent: 'space-evenly' }}>
  <Button secondary>Button</Button>
  <Button secondary disabled>Button</Button>
  <Button secondary icon>
      <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'>
         <path
           d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' />
       </svg>
  </Button>
</Playground>

<hr />

## Button (inverse, secondary)
### Description
For secondary actions, and for additional options adjacent to a primary button.

<Playground style={{ backgroundColor: "#333", margin: '-2em', padding: '2em 50% 2em 2em', display: 'flex', justifyContent: 'space-evenly' }}>
  <Button inverse secondary>Button</Button>
  <Button inverse secondary disabled>Button</Button>
  <Button inverse secondary icon>
      <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'>
         <path
           d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' />
       </svg>
  </Button>
</Playground>

<hr />

## Properties
<Props of={Button} />