import { Story, Props, Preview } from '@storybook/addon-docs';

import { Button } from '.';
import { HangUpIcon } from '@100mslive/react-icons';

## Button

The button has three possible variants,

- Primary,
- Standard, and
- Danger

Button can also have an icon, you can add the icon as a children of that Button. The `icon` attribute will add a padding
between those children elements.

A Button also have an attribute `outlined` which will add an outline to that Button.

### Primary

<Preview>
  <Story id="ui-components-button--primary" />
</Preview>

### Standard

<Preview>
  <Story id="ui-components-button--standard" />
</Preview>

### Danger

<Preview>
  <Story id="ui-components-button--danger" />
</Preview>

### With Icon

<Preview>
  <Story id="ui-components-button--with-icon" />
</Preview>

<Props />