Badges
A small label that states a status or a count — Active, Beta, 3 — in a colour that carries its meaning. It is read, not pressed.
Preview
When to use
- To mark the status of a row, a card or a plan: Paid, Pending, Failed.
- For counts on tabs and navigation items: unread messages, open issues.
Reach for something else
- For something the person can remove or choose: that is a Tag.
- For a message that needs reading: that is an Alert.
Anatomy
- 1
Container
A short pill in one of three styles: filled, light or stroke.
- 2
Dot
Optional, a small circle before the label that repeats the colour.
- 3
Label
One or two words, or a number, in sentence case.
States
Filled
Solid colour, white text, for the strongest emphasis.
Light
A soft tint with darker text; the default in tables.
Stroke
A white pill with a coloured border, for quiet surfaces.
Colour
Success, warning, error, info or neutral, each fixed to one meaning.
Accessibility
- A badge is text, not a control: a <span>, out of the tab order.
- The meaning is in the words, never the colour alone, so "Failed" reads as failed without seeing red.
- A count badge on its own gets context, such as "3 unread", through visually hidden text.
Source
The Badges is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block