Content
- One short word. Write it in normal case ("Alum"); the badge makes it uppercase, so screen readers still read the word.
ExperimentalatomLabels
Badge
The tiny uppercase sticker, such as ALUM. For everything else, use Tag.
import { … } from "@brdgapp/ui/components/badge"Usage
Badge is the tiny uppercase sticker that sits next to a name or a title, such as ALUM. It is deliberately small and loud, so use it rarely. The usual mistake is using it for status or category labels: those are Tags.
When to use
- A short marker next to a name or title: Alum, Beta, Live, New.
- When the marker is a property of the thing, not a status that changes.
When not to use
- For a status, category, stage or count. Use Tag instead.
- For an intro rating (Great, OK, Not good). Bridge OS has RatingPill for that, built on Tag.
Labels are boxes, controls are pills
Tags and badges have 4px corners and never become pills. Pills (rounded-full) are for things you press: buttons, filter chips, search fields, segmented controls.
Nothing below 11px
No text is smaller than 11px, except the 8px uppercase Badge sticker. Use the scale: 24, 22, 16, 15, 14, 13 (body), 12, 11.
Anatomy
Alum
Box. 4px corners, never a pill. Outline styles have a 1px border; solid styles have a fill.
Label. 8px, Bold, uppercase, 1px letter spacing. One short word.
Examples
Styles
BetaAlumLiveNew
Next to a name
Where badges usually live.
Priya NatarajanAlum
States
| State | What happens |
|---|---|
| Rest | Badges don't change state and aren't interactive. |
Behavior
- A plain
<span>. Not focusable and not a control.
Do and don't
Do
Use one word.Don't
Write a phrase in a badge; at 8px it becomes unreadable.Do
Keep at most one badge next to a name.Don't
Stack several badges in a row.Accessibility
- At 8px the text is very small. A badge must repeat information available elsewhere, or be decorative.
- Uppercase is done with CSS, so screen readers read the word normally.
API reference
Badge
The sticker.
| Prop | Type | Default | Description |
|---|---|---|---|
style | "outline" | "alum" | "solid-red" | "solid-dark" | "outline" | The look. Named as in Bridge OS; it takes no CSS. |
className | string | — | Layout only. Merged last. |
badgeVariants
The class recipe behind Badge.
| Prop | Type | Default | Description |
|---|
Lineage
What it's built from and where it's used, read from the code. When you change it, check these too.
- Built from
- Nothing else in the package
- Used by components
- None
- Used in patterns
- None
- Used in templates
- None
Known gaps
Where the code still differs from the system. Follow the system, not the gap.
- The alum badge's honey outline text (
--honeyon white) is about 2.5:1, well under 4.5:1. It is the Arch design; whether to darken it is undecided. - Bridge OS fills
solid-redwith--error(white text 4.41:1, fails AA). The package uses--danger-solid(5.51:1). - Bridge OS's
solid-darkkeeps white text in dark mode on a light gray fill, which is nearly unreadable. The package flips the text with the theme. - Bridge OS's
components.mdstill has an older Badge entry with six color variants. It is out of date: that design is now Tag.
Sources
- Bridge OS
components.md→ Tag / Badge / RatingPill;src/components/ui/badge.tsx. - Decision 2026-10-30: Badge is the 8px uppercase sticker; the older 6-colour entry is stale.
- Contrast computed from the package tokens.