Badge
Badge is a small, rounded inline label for tags, counts, and lightweight categorical markers. It ships four visual variants and is purely presentational. Reach for it to annotate a row, tag a category, or show a small count next to a title. If you need a color-coded label whose color carries semantic lifecycle meaning (on track, overdue, scheduled), prefer the Status Badge instead, which maps meaning to tokens for you.
Live demo
The interactive story below runs from the deployed Storybook.
Usage
Source:
badge.tsx
import { Badge } from "@beacon/design-system";
<Badge>Badge</Badge><Badge variant="secondary">Secondary</Badge><Badge variant="destructive">Destructive</Badge><Badge variant="outline">Outline</Badge>Props
Badge is a div and accepts all standard HTMLDivElement attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | "default" | Visual style of the pill. |
className | string | (none) | Extra classes merged onto the badge. |
children | ReactNode | (none) | Label content shown inside the pill. |
The badgeVariants helper is also exported for composing the badge classes onto another element.
When to use
- Tag a row or card with a short categorical label.
- Show a small count beside a heading or nav item.
- Mark an item as new, beta, or otherwise noteworthy.
Do not use Badge for color-coded lifecycle status. For status whose color must carry meaning across the app, use the Status Badge instead.