import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import Button, { allowedThemes as buttonThemes } from '../Button';
import Icon from '../../icon/Icon';
import * as ButtonStories from './Button.stories';

<Meta of={ButtonStories} />

# Button

<br />

## `Buttons` trigger custom actions.

<br />

### With styles

<Canvas>
  <Story of={ButtonStories.WithStyles} />
</Canvas>

### Wide

<Canvas>
  <Story of={ButtonStories.Wide} />
</Canvas>

### Small

<Canvas>
  <Story of={ButtonStories.Small} />
</Canvas>

### Large

<Canvas>
  <Story of={ButtonStories.Large} />
</Canvas>

### Links

<Canvas>
  <Story of={ButtonStories.Links} />
</Canvas>

### With icons

<Canvas>
  <Story of={ButtonStories.WithIcons} />
</Canvas>

## Usage Example

```jsx
import Button from '@appdirect/sfb-theme-components/src/atoms/button/Button';

<Button type="primary" wide>Wide Button</Button>

```

## Props

<ArgsTable of={Button} />
