Small counts and statuses pinned to other elements.
| Prop | Type | Notes |
|---|---|---|
| variant | neutral·brand·success·error·info·warning·solid·outline | Semantic role and colour |
| size | S · M · L | Pill scale; M is the default |
| dot | boolean | Leading status dot in currentColor |
| count / max | number / number | Numeric badge; hides at 0, caps at max+ |
| anchor | boolean | Positions the count top-right of children |
Badges are read-only. They label or count; they are never a click target — wrap them in a Button or Link if action is needed.
One short word, uppercase. The status reads in a glance.
Don't put a sentence in a badge. Long copy belongs in a Callout.
Anchor a count to the thing it counts; hide it at zero.
Don't stack many coloured badges. Competing accents lose all meaning.
Status per row, right-aligned, one colour system across the table.
Unread counts beside a nav label, capped and hidden at zero.
A bare dot shows presence without a number.
| Token | Value | Role |
|---|---|---|
| --bdg-pad | 4px 8px | Label badge padding |
| --bdg-font | 0.62rem mono, .06em | Uppercase label |
| --bdg-success | #1FA35C | Tint fill + border + text |
| --bdg-error | #EB4A4F | Tint fill + border + text |
| --bdg-count | 18px · #FF7A00 | Warm circle, white number |
| --bdg-anchor-ring | 2px page bg | Separates count from its host |
<span class="o-badge o-badge--success has-dot">ACTIVE</span> <span class="o-badge o-badge--count">5</span> <span class="o-badge-anchor"> <BellIcon /> <span class="o-badge o-badge--count">5</span> </span>