import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import Badge from '../Badge';
import '../styles/Badge.story.scss';
import * as BadgeStories from './Badge.stories';

<Meta of={BadgeStories} />

# Badge

<br />

## `Badges` are used to display counts and labels.

<br />

### Default

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

### Success

<Canvas>
  <Story of={BadgeStories.Success} />
</Canvas>

### Emphasis

<Canvas>
  <Story of={BadgeStories.Emphasis} />
</Canvas>

### Pending

<Canvas>
  <Story of={BadgeStories.Pending} />
</Canvas>

### Error

<Canvas>
  <Story of={BadgeStories.Error} />
</Canvas>

### With class

<Canvas>
  <Story of={BadgeStories.WithClass} />
</Canvas>

## Usage Example

```jsx
import Badge from '@appdirect/sfb-theme-components/src/atoms/badge/Badge';

<Badge
    label="Success"
    type="success"  // Badge.allowedTypes 'default', 'error', 'success', 'emphasis', 'pending'
/>

```

## Props

<ArgsTable of={Badge} />
