① Container
Rounded rectangle (4px radius) — tinted background, no border
② Icon
Optional — 12px (sm) or 14px (md), inherits text colour
③ Label text
Required — 1–2 words, sentence case, 500 weight
Examples
Interactive previews with copy-ready code snippets. Badges communicate status at a glance — keep labels short and tone consistent.
All tones
Five semantic tones — each maps to a specific status meaning. The subtle variant uses a tinted background with matching text, no border.
NeutralSuccessWarningErrorInfo
Solid variant
Bold fills with white text. Use for high-emphasis status labels or on light surfaces where subtle backgrounds don't have enough contrast.
NeutralSuccessWarningErrorInfo
Sizes
sm (h=20, 12px) for compact contexts like table cells. md (h=28, 14px) for standalone use. Both use 8px horizontal padding and a 4px corner radius.
SmallMedium
With icon
An optional leading icon adds visual context to the status. The icon is sized 12px (sm) or 14px (md) and inherits the badge text colour.
ActivePendingFailedProcessing
In context — table rows
Badges are most common inside data tables to communicate row-level status. Keep the badge in a consistent column.
Product #1042In Stock
Product #1043Out of Stock
Product #1044Pending
Count badge
Badges work well for notification counts. Use sm size with a neutral or error tone.
1299+0
Anatomy
In Stock① Container② Icon③ Label
States
All five tones in both variants. Badges are static — they have no interactive states.
Subtle
Neutralneutral
Successsuccess
Warningwarning
Errorerror
Infoinfo
Solid
Neutralneutral
Successsuccess
Warningwarning
Errorerror
Infoinfo
Design tokens
| Token | Value | Description |
|---|---|---|
background/muted | #e1e1e1 | Neutral subtle fill |
background/state/info/subtle | #ecf7ff | Info subtle fill |
background/state/success/subtle | #eefff5 | Success subtle fill |
background/state/warning/subtle | #fff6ee | Warning subtle fill |
background/state/error/subtle | #ffeae7 | Error subtle fill |
background/inverse | #3b3b3d | Neutral solid fill |
background/state/info/bold | #00599d | Info solid fill |
background/state/success/bold | #049442 | Success solid fill |
background/state/warning/bold | #bb7034 | Warning solid fill |
background/state/error/bold | #bc1700 | Error solid fill |
text/primary | #3b3b3d | Neutral text |
text/state/info | #004275 | Info text |
text/state/success | #049442 | Success text |
text/state/warning | #774217 | Warning text |
text/state/error | #931200 | Error text |
text/inverse | #ffffff | Solid variant text |
radius/sm | 4px | Badge corner radius |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tone | "neutral" | "success" | "warning" | "error" | "info" | "neutral" | Semantic colour tone — maps to status meaning. |
variant | "subtle" | "solid" | "subtle" | subtle=light bg with tinted text, solid=saturated bg with white text. |
size | "sm" | "md" | "md" | sm for compact contexts like table cells, md for standalone use. |
icon | boolean | false | Show a leading icon before the label. Icon size follows badge size (12px sm / 14px md). |
children | React.ReactNode | — | Badge label content — keep to 1–2 words. |
Content guidelines
Do
- Use badges in tables to show row status
- Keep labels 1–2 words: "Active", "Pending", "In Stock"
- Use consistent tone mapping across your app (success=active/done, warning=pending, error=failed)
- Use sm size inside table cells or compact UI
- Use the status dot for live or real-time indicators
Don't
- ✕Don't use badges as interactive buttons or links
- ✕Don't use more than 2–3 different tones in a single view
- ✕Don't use solid variant for status — use subtle for better readability
- ✕Don't use long labels — truncate or abbreviate instead
- ✕Don't mix sizes within the same table or list
View in Figma: Badge ComponentSet (311-1157)