Badge
A small label for categories, counts, and states. A Bones component (Base UI has no such part): a plain span with a soft tint per palette hue, an optional status dot, and icons as children.
Playground
Pick a tint and a status dot, add the icon, and switch to compact to see the 20px form; the Code tab shows the exact markup.
Variants
Neutral plus the eight palette hues, each a soft fill with readable text from the tint tokens, so they hold up in both themes. Hues are for categories; feedback (success, warning) belongs to the status dot, so meaning never rides on the tint alone.
Sizes, status, and icons
Default is 24px, compact is a 20px tag for dense rows. The status dot goes first, then any icon, then the text; the dot and the icon are hidden from screen readers, so the text carries the meaning.
Styling states
The tint and size are data attributes, and the fills come from the --ub-tint-* token pairs (see Theming), so a theme recolors every badge at once and a one-off is a single rule:
.ub-badge[data-color="blue"] {
background: var(--ub-accent);
color: var(--ub-accent-contrast);
}
.ub-badge[data-size="compact"] {
font-weight: 600;
}Props
Everything a span accepts passes through, plus:
| Prop | Type | Default | Description |
|---|---|---|---|
color | "neutral" | "red" | "orange" | "green" | "teal" | "blue" | "violet" | "fuchsia" | "rose" | "neutral" | The tint; hues are for categories, not feedback. |
size | "default" | "compact" | "default" | Default is 24px tall with the compact text size; compact is 20px with text one step smaller and the small radius. |
status | "neutral" | "success" | "info" | "warning" | "danger" | – | Adds a decorative status dot before the label; see Status for the standalone dot. |
One thing to know: a badge has no role and is never focusable. If it should open or filter something, wrap it in a Button or a link instead of adding handlers to it.
Agent instructions
Working with a coding agent? Paste this into its context, or point it at llms.txt for the whole library.
Badge, from @usebones/react.
- One part, a plain span: <Badge color="teal" size="compact" status="success">Label</Badge>. color "neutral" (default) | "red" | "orange" | "green" | "teal" | "blue" | "violet" | "fuchsia" | "rose"; size "default" (24px) | "compact" (20px).
- Icons are children before the text: <Badge><Icon name="check" />Verified</Badge>. status adds a decorative dot first; both are aria-hidden, so the text must carry the meaning.
- Hues are for categories; put feedback in status (success, warning, danger) rather than in the tint. Not interactive: wrap in a Button or link if it should do something.
- Restyle in CSS via .ub-badge, [data-color], [data-size], .ub-badge-status; fills come from the --ub-tint-<hue>-bg and -text tokens. Tokens only.