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

import { Button } from './';
import { Icon } from '../Icon';
import { Playground } from 'docz';

# Button

The `<Button/>` component is used for `<button/>` elements. It uses the [Typography](/components/typography) component to style the look of the text inside the element. 

> If a `href="..."` prop is supplied, the button renders as an `<a/>` tag.

## Import

```js
import { Button } from '@firstclasspostcodes/sw13';
// or
import { Button } from '@firstclasspostcodes/sw13/lib/components/Button';
```

## Example

<Playground>
  
  <p>
    <Button hue="5" color="base" size="0">Click me</Button>
  </p>
  <p>
    <Button href="https://google.com" hue="5" color="base" size="0">Click me</Button>
  </p>
</Playground>

## Icon Button

<Playground>
  <p>
    <Button hue="5" color="base" size="0">
      <Icon icon="download"/> Download
    </Button>
  </p>
  <p>
    <Button variant="outlined" hue="5" color="base" size="2">
      Download <Icon size="2" icon="download"/>
    </Button>
  </p>
</Playground>