import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { boolean, select, number } from '@storybook/addon-knobs'
import TagList from './'
import { TagListExample, SelectingTags } from './TagList.storiesHelpers'

<Meta title="Components/Badges/TagList" component={TagList} />

# TagList

A TagList component is a UI element that contains `Tag` components.

<Canvas>
  <Story name="default">
    <TagListExample
      clearAll={boolean('clearAll', true)}
      isRemovable={boolean('isRemovable', true)}
      overflowFade={boolean('overflowFade', false)}
      size={select('Size', ['sm', 'md', 'lg'], 'sm')}
      limit={number('limit', 0)}
    />
  </Story>
</Canvas>

<Canvas>
  <Story name="selecting">
    <SelectingTags />
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: PL
- **Usage**: ChatApp, Customers

<br />
<br />

### Props

<ArgsTable of={TagList} />
