---
name: Button
route: /components/button
menu: Components
---

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

# Button

## Usage

```javascript
import { Button } from '@snowpak/powpow';

export default () => (
  <Button>Search</Button>;
);
```

## Props

<PropsTable of={Button} />

## Examples

### Default button

<Playground>
  <Button href="#" data-cy="sp-button--default">
    Button
  </Button>
</Playground>

### Small button

<Playground>
  <Button href="#" size="small" data-cy="sp-button--small">
    Small Button
  </Button>
</Playground>

### Mini button

<Playground>
  <Button href="#" size="mini" data-cy="sp-button--mini">
    Mini Button
  </Button>
</Playground>

### Form button

<Playground>
  <Button as="button" type="button" data-cy="sp-button--form">
    Form Button
  </Button>
</Playground>

### Span button

<Playground>
  <Button as="span" data-cy="sp-button--span">
    Span Button
  </Button>
</Playground>