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

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

# Button

This component renders an HTML `<button>` and passes along all props.

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

## Primary

<Playground>
	 <Button color="primary">Click me</Button>
</Playground>

## Primary outlined

<Playground>
	 <Button color="primary" variant="outlined">Click me</Button>
</Playground>

## Primary text

<Playground>
	 <Button color="primary" variant="text">Click me</Button>
</Playground>

## Small

<Playground>
	 <Button color="primary" size="small">Click me</Button>
</Playground>

## Medium

<Playground>
	 <Button color="primary" size="medium">Click me</Button>
</Playground>

## Large

<Playground>
	 <Button color="primary" size="large">Click me</Button>
</Playground>

## Full width

<Playground>
	 <Button color="primary" size="large" fullWidth>Click me</Button>
</Playground>

## Secondary

<Playground>
	 <Button color="secondary">Click me</Button>
</Playground>

## Disabled

<Playground>
	 <Button color="primary" disabled>Click me</Button>
</Playground>