# Badge

Display compact status or taxonomy labels. It's like putting a colorful little sticker on your data to make it feel special.

## Notes

- Use short labels that fit in one line. If your badge needs a scrollbar, you're doing it wrong.
- Avoid using badges as primary navigation. They're meant to be cute little metadata tags, not big chunky buttons.
- Great for status indicators (e.g., 'New', 'Beta', 'Failed spectacularly').

## Properties

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| variant | `'default' | 'success' | 'warning' | 'danger' | 'info'` | 'default' | The visual variant of the badge. |
| class | `string` | - | Additional CSS classes. |

## Example

```astro
<div class="flex flex-wrap gap-3">
  <Badge>Default</Badge>
  <Badge variant="success">Success</Badge>
  <Badge variant="warning">Warning</Badge>
  <Badge variant="danger">Danger</Badge>
  <Badge variant="info">Info</Badge>
</div>
```