---
menu: Atoms
name: Button
route: /button
---

import { Playground, PropsTable } from 'docz';
import Button from '.';

# Button

## Use cases

<div>
  <Button href='#'>primary</Button>
  <Button secondary href='#'>secondary</Button>
  <Button warn href='#'>warning</Button>
  <Button disabled href='#'>disabled</Button>
  <Button outline href='#'>primary outline</Button>
  <Button outline secondary href='#'>secondary outline</Button>
  <Button outline warn href='#'>warning outline</Button>
  <Button outline disabled href='#'>disabled outline</Button>
</div>

## PropsTable

<PropsTable of={Button} />

## Navigation

This component needs a valid props href or onClick:

- If a prop href is provided, it will render a anchor tag; 
- If you provide a onClick prop, it will render a button tag; 
- Otherwise, it will render null.

<Playground>
  <Button>null</Button>
  <Button href='#navigation'>anchor</Button>
  <Button onClick={() => alert('clicked!') } >button</Button>
</Playground>

## outline:bool

<Playground>
  <Button href='#outlinebool' />
  <Button outline href='#outlinebool'>default outline</Button>
</Playground>

## secondary:bool

<Playground>
  <Button secondary href='#secondarybool'>secondary</Button>
  <Button secondary outline href='#secondarybool'>secondary outline</Button>
</Playground>

## warn:bool

<Playground>
  <Button warn href='#warnbool'>warn</Button>
  <Button warn outline href='#warnbool'>warn outline</Button>
</Playground>

## disabled:bool

<Playground>
  <Button href='#disabledbool'>enable</Button>
  <Button disabled href='#disabledbool'>disable</Button>
  <Button disabled outline href='#disabledbool'>disable outline</Button>
</Playground>