import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import ButtonIcon from '../ButtonIcon';
import { allowedThemes as buttonThemes, allowedSizes as buttonSizes } from '../../button/Button';
import * as ButtonIconStories from './ButtonIcon.stories';

<Meta of={ButtonIconStories} />

# ButtonIcon

<br />

## `ButtonIcons` are used to display buttons with an icon.

<br />

### Default

<Canvas>
  <Story of={ButtonIconStories.Default} />
</Canvas>

### Icon right

<Canvas>
  <Story of={ButtonIconStories.IconRight} />
</Canvas>

### Disabled

<Canvas>
  <Story of={ButtonIconStories.Disabled} />
</Canvas>

### Selected

<Canvas>
  <Story of={ButtonIconStories.Selected} />
</Canvas>

### Only text

<Canvas>
  <Story of={ButtonIconStories.OnlyText} />
</Canvas>

### Only icon

<Canvas>
  <Story of={ButtonIconStories.OnlyIcon} />
</Canvas>

### Not clickable

<Canvas>
  <Story of={ButtonIconStories.NotClickable} />
</Canvas>

### Sizes

<Canvas>
  <Story of={ButtonIconStories.Sizes} />
</Canvas>

### Custom icon

<Canvas>
  <Story of={ButtonIconStories.CustomIcon} />
</Canvas>

### Long text

<Canvas>
  <Story of={ButtonIconStories.LongText} />
</Canvas>

### Theme buttons

<Canvas>
  <Story of={ButtonIconStories.ThemeButtons} />
</Canvas>

### Theme links

<Canvas>
  <Story of={ButtonIconStories.ThemeLinks} />
</Canvas>

## Usage Example

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

<ButtonIcon theme="primary" icon="plus">Add</ButtonIcon>

```

## Props

<ArgsTable of={ButtonIcon} />
