Badge
Compact status label for counts, states and categories — pill-shaped with an optional status dot.
Preview
Live preview
default
secondary
outline
ghost
warning
online
Usage
Examples
Status with dot
Operational
Degraded
Offline
<Badge dot variant="secondary">Operational</Badge>
<Badge dot variant="warning">Degraded</Badge>Sizes
sm
md
lg
<Badge size="sm">sm</Badge>
<Badge size="md">md</Badge>
<Badge size="lg">lg</Badge>Count badge next to a title
Open issues
12
<div className="flex items-center gap-2">
<h3 className="font-semibold">Open issues</h3>
<Badge variant="secondary">12</Badge>
</div>Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "secondary" | "outline" | "ghost" | "warning" | "default" | Visual role. warning uses the amber palette for attention states. |
| size | "sm" | "md" | "lg" | "md" | Padding and type scale of the pill. |
| dot | boolean | — | Prefixes a 6px status dot that inherits the badge color. |
| asChild | boolean | — | Render the child element instead of a <div> — for linking a badge. |
| …native element attrs | HTMLAttributes<HTMLElement> | — | title, aria-*, data-*, … |
Accessibility
Accessibility notes
- A badge is decorative by default — if it carries meaning the control nearby does not, add readable text or an aria-label.
- Colour alone is insufficient: pair every status colour with a word ("Degraded", not just amber).
- The dot span is visual only; screen readers rely on the badge text beside it.
- Badges are not interactive — if it should be pressed, use a Button or a link with asChild.