Data display
Badge
A compact signal for status, category or a count. Glass gradient fill with an adaptive stroke.
Examples
Filled · the text is the status, colour only reinforces it
PrimarySecondaryNeutralErrorWarningSuccessInfo
Outlined
PrimarySecondaryNeutralErrorWarningSuccessInfo
Sizes
LargeMediumSmall
Count badge with an accessible name
Anatomy
| # | Part | Description | Presence |
|---|---|---|---|
| 1 | Container | Pill 9999px or tag 6px | Required |
| 2 | Dot | Optional status dot | Optional |
| 3 | Label | Manrope 13 / 11 / 10px | Required |
Specifications
| Permutations | 42 = 7 colourways × 2 styles × 3 sizes |
|---|---|
| Colourways | Primary · Secondary · Neutral · Error · Warning · Success · Info |
| Styles | Filled · Outlined |
| Type | Manrope 13px (Large) · 11px (Medium) · 10px (Small) |
| Radius | Pill 9999px or Tag 6px |
| Stroke | badgeStrokeGradient, 1.5px |
Interaction
| Key | Result |
|---|---|
| None | Not interactive. If it is, use Chip or Button. |
| Trigger | Response |
|---|---|
| None | Static |
Accessibility
role · static text
1.4.1Use of Colour1.4.3Contrast (Minimum)4.1.3Status Messages
| Requirement | How Rig meets it |
|---|---|
| Meaning | The text states the status. Colour only reinforces it (WCAG 1.4.1). |
| Count | Give counts a name: aria-label="12 unread" |
| Contrast | 10px text at 4.5:1 on the fill; outlined variants use lighter text tokens on dark and darker on light |
| Dynamic | Wrap changing badges in a polite live region |
Usage
| Do | Don’t |
|---|---|
| Use one or two words | Do not make badges clickable |
| Pair status with an icon in dense tables | Do not rely on colour to tell Error from Success |
Notes from the Figma file
- Outlined badges keep a high-chroma outline so they stay readable at low vibrancy.