import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";

import * as stories from "./badge.stories";

<Meta of={stories} />

```ts
import { BadgeModule } from "@bitwarden/components";
```

# Badge

The Badge directive can be used on a `<span>` (non clickable events), or an `<a>` or `<button>` tag
for interactive events. The Focus and Hover states only apply to badges used for interactive events.

Typically Badges are only used with text set to `text-xs`. If additional sizes are needed, the
component configurations may be reviewed and adjusted.

<Primary />
<Controls />

## Styles

### Primary

The primary badge is used to indicate an active status (example: device management page) or provide
additional information (example: type of emergency access granted).

<Story of={stories.Primary} />

### Secondary

The secondary badge style is typically is a default badge style. It is often used to indicate
neutral information.

<Story of={stories.Secondary} />

### Success

The success badge is used to indicate a positive status, OR to indicate a feature requires a Premium
subscription. See [Premium Badge](?path=/docs/web-premium-badge--docs)

<Story of={stories.Success} />

### Danger

The danger badge is used to indicate a negative status.

<Story of={stories.Danger} />

### Warning

The warning badge is used to indicate a status waiting on an additional action from the active user.

<Story of={stories.Warning} />

### Info

The info badge is used to indicate a low emphasis informative information.

<Story of={stories.Info} />

## Badges as counters

Badges can be used as part of links or buttons to provide a counter. See the
[Toggle Group](?path=/docs/component-library-toggle-group--docs) component.

## Accessibility

Be sure to use the correct html tag based on the purpose or function of the badge. Follow color WCAG
color contrast guidelines for small text.