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

<Meta
  title="Components/Badges/Badge"
  component={Badge}
  parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/Wp9mDxTvWicSTWtezj2ImkMP/HSDS-Product?node-id=2582%3A7292',
    },
  }}
/>

# Badge

A Badge component is a UI element that helps indicate the count, state, or status of something.

<Canvas>
  <Story name="default">
    <Badge>Nice badge</Badge>
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: Juan Pablo
- **Usage**: Everywhere

<br />
<br />

### Props

<ArgsTable of={Badge} />

### Stories

#### Status

<Canvas>
  <Story name="Status">
    <div>
      <Badge status="error">Badger</Badge>
      <br />
      <br />
      <Badge status="info">Badger</Badge>
      <br />
      <br />
      <Badge status="success">Badger</Badge>
      <br />
      <br />
      <Badge status="warning">Badger</Badge>
    </div>
  </Story>
</Canvas>

#### White

<Canvas>
  <Story name="White">
    <div>
      <Badge>Regular</Badge>
      <br />
      <br />
      <Badge white>White</Badge>
    </div>
  </Story>
</Canvas>

#### Sizes

<Canvas>
  <Story name="Sizes">
    <div>
      <Badge size="md">Regular</Badge>
      <br />
      <br />
      <Badge size="sm">Small</Badge>
    </div>
  </Story>
</Canvas>

#### Square

<Canvas>
  <Story name="Square">
    <Badge isSquare>Regular</Badge>
  </Story>
</Canvas>

#### Inverted

<Canvas>
  <Story name="Inverted">
    <div>
      <Badge status="error" inverted={true}>
        Error
      </Badge>
      <br />
      <br />
      <Badge status="info" inverted={true}>
        Info
      </Badge>
      <br />
      <br />
      <Badge status="success" inverted={true}>
        Success
      </Badge>
      <br />
      <br />
      <Badge status="warning" inverted={true}>
        Warning
      </Badge>
    </div>
  </Story>
</Canvas>
