# Badge

A small label for a status, a count or a category, built on the pill.

```ehtml Example
import { Badge } from "@elements/ui/badge";
import { Icon } from "@elements/ui/icon";

<Badge>Draft</Badge>
<Badge variant="success" dot>Active</Badge>
<Badge variant="primary" icon="inline-start"><Icon name="check" /> Verified</Badge>
<Badge href="/changelog" variant="outline" icon="inline-end">What's new <Icon name="arrow-right" /></Badge>
```

## Parts

| Part | What it is |
|---|---|
| `.badge.pill` | The span or link. Usable without the template: class="badge pill is-success". |
| `.pill-dot` | The status dot. |

## Attributes

| Attribute | Type | Default | Description |
|---|---|---|---|
| `variant` | `"primary" \| "secondary" \| "outline" \| "ghost" \| "link" \| "danger" \| "success" \| "warning" \| "info" \| "accent"` | `"primary"` | Look and intent. The status variants are the base pill intents. |
| `dot` | `boolean` | `false` | A leading status dot in the variant's color. |
| `href` | `string` | `""` | Renders an `<a>`: a badge that links. |
| `icon` | `"" \| "inline-start" \| "inline-end"` | `""` | The side an icon sits on; that side gets the tighter padding. |
| `class` | `string` | `""` | Extra classes; custom colors go here. |
| `attrs` | `Record<string, string \| number \| boolean \| undefined>` | `{}` | Any other attributes: id, title, aria-label, target, rel, data-\*. |

## Slots

| Slot | Content |
|---|---|
| `default` | The label. An `<Icon>` or `<Spinner>` on either side of the text is sized and spaced for you. |

## Keyboard

| Keys | Action |
|---|---|
| `Tab` | Focuses a link badge; a plain badge is not focusable. |
| `Enter` | Follows a link badge. |

## Data attributes

| Attribute | Values | On |
|---|---|---|
| `data-variant` | the variant | root |
| `aria-invalid` | `"true": a danger border, and a danger ring on focus` | root |

## Accessibility

- A badge is text, with no role. A link badge is a native `<a>`, focusable with a visible focus ring.
- The dot is aria-hidden: the label carries the meaning, never the color alone.
- Give a number-only badge a name through attrs, such as aria-label="8 unread".

## See also

- [Icon](icon): An inline stroke icon from the set the templates draw their own controls with, sized in pixels and colored by the text around it.
- [Card](card): A surface with a header, body and footer, built on the base card styles.
- [Alert](alert): A callout that draws attention to a message, with an icon, a title and an action.
- [Kbd](kbd): A keyboard key or shortcut, as text.
- [Separator](separator): A horizontal or vertical rule between content, semantic or decorative.
- [Skeleton](skeleton): A placeholder shape shown while content loads, or wrapped around the content so it never moves.