import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import { Button } from '.';

<Meta title="Components/Button" component={Button} />

# Button

The `<Button/>` component is used for `<button/>` elements. It uses the `Typography.Text` component to style the look of the text inside the element. 

## Import

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

## Standard

<Preview>
  <Story name="Standard">
    <Button fullWidth={{ xs: true, md: false }}>Some button</Button>
  </Story>
</Preview>

## Standard (as link)

<Preview>
  <Story name="Standard (as link)">
    <Button as="a" href="https://google.com" fullWidth={{ xs: true, md: false }}>Some button</Button>
  </Story>
</Preview>

## Larger & Colored

<Preview>
  <Story name="Larger & Colored">
    <Button color="brand" size="20">Some button</Button>
  </Story>
</Preview>

## Disabled

<Preview>
  <Story name="Disabled">
    <Button disabled>Some button</Button>
  </Story>
</Preview>

## Background

<Preview>
  <Story name="Background">
    <Button background="brand" color="white">Some button</Button>
  </Story>
</Preview>

## Text

<Preview>
  <Story name="Text">
    <Button border="transparent" color="brand">Button without a border</Button>
  </Story>
</Preview>