import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'
import { text } from '@storybook/addon-knobs'

import { APP } from '../_utils/taxonomy'
import { Badge } from './index'

<Meta title={`${APP}/Badge`} />

# **Badge**

<Canvas>
  <Story name="Default">
    <Badge ariaLabel="Unread messages">{text('children', '456')}</Badge>
  </Story>
</Canvas>

## Specifications

## Usage

```jsx
import { Badge } from '@blablacar/ui-library/build/badge'
<Badge ariaLabel="Unread messages">456</Badge>
```

<ArgsTable of={Badge} />

Content of `Badge` is whatever `children` element you want, provided it is of type `string | JSX.Element | number`