Badge
Labels a row or item with a short status or category.
Try it
Pick a colour, then switch emphasis to high.
Reporting
Colour
Emphasis
Size
Capitals
<WildBadge
color="success"
emphasis="low"
size="xs"
>
Reporting
</WildBadge>When to use
- Use a badge to label a row with a short status or category: Online, Pending, Low battery.
- Use a badge for a fact and a chip for something a person chose. A badge is a small rounded rectangle; a chip has fully round ends.
- Use low emphasis by default, and high only for the row that has to be found while scrolling.
Don’t use it
- For anything a person can press, toggle or remove. Use a chip.
- As the only sign of a status. The words carry the meaning; the colour backs them up.
Colours
Eight colours, each at two emphasis levels.
Online
ghost
Online
accent
Online
success
Online
warning
Online
error
Online
ultra
Online
neutral
Online
live
<WildBadge color="success">Online</WildBadge>
<WildBadge color="warning" emphasis="high">Low battery</WildBadge>ultra for states that are notable but neither good nor bad, such as a site in calibration or a reading held for review.Emphasis
Low is a tint with coloured text; high is a solid fill. Ghost and neutral share one high fill, so they’re left out below.
low
high
accent
Online
Online
success
Online
Online
warning
Online
Online
error
Online
Online
ultra
Online
Online
live
Online
Online
Sizes
Online
2xs · 20
Online
xs · 24
Online
sm · 28
Pending
capitals
Reporting
live
Accessibility
A badge isn’t focusable, and a screen reader reads its label as text. Every colour clears 4.5:1 at both emphasis levels but one: a high-emphasis live badge is white on blue-1000, accepted at 4.23:1.
- Pass a label even with
iconOnly. It’s hidden on screen and kept for screen readers.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | 'ghost' | 'accent' | 'success' | 'warning' | 'error' | 'ultra' | 'neutral' | 'live' | 'ghost' | The status or category colour. |
| emphasis | 'low' | 'high' | 'low' | A tint with coloured text, or a solid fill. |
| size | '2xs' | 'xs' | 'sm' | 'xs' | 20, 24 or 28px tall. |
| capitals | boolean | false | Uppercase, with 0.5px letter spacing. |
| live | boolean | false | Green fill with a pulsing dot. |
| icon | ReactNode | — | Icon before the label. |
| iconOnly | boolean | false | Square badge; the label is kept for screen readers. |
| children | ReactNode | — | The label. One or two words. |
Tokens
| Token | Value | Where it lands |
|---|---|---|
| --radius-md | 6px | Corners. |
| --font-weight-medium | 475 | Label weight. |
| --color-primary-light | #EBFAFF | Accent ground. |
| --global-blue-1100 | #0C296A | Accent text, 12.75:1 on the accent ground. |
| --color-primary | #00AEEF | Accent high fill, under #0A090B text. |
| --global-green-100 | #EBFBF1 | Success ground, and the live fill. |
| --global-green-900 | #018030 | Success text and high fill. |
| --global-red-900 | #BC1C1C | Error text. |
| --color-error | #E12121 | Error high fill. |
| --color-warning | #EC980C | Warning high fill, under #0A090B text. |
| --color-success | #019939 | The live dot. |