Badge
Badges display a status or add brief context to information. They support small pieces of data — one word maximum — and should never replace a button.
Positive
Warning
Negative
Neutral
4/6
12%
8%
New
preview
props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | required | The badge label. Keep to one word maximum. |
intent | 'positive' | 'warning' | 'negative' | 'neutral' | 'neutral' | Controls the colour palette. Choose the intent that matches the meaning of the data. |
icon | 'up' | 'plus' | 'down' | — | Optional icon shown left of the label. Use sparingly alongside data that updates. |
usage
Badges communicate status or small data points at a glance. The colour palette is tied to intent — choose the one that accurately reflects the meaning, not the one that looks best.
When to use
- To show a status — e.g. Active, Sold, Pending
- To display a small numerical value or fraction — e.g. 4/6, 12%
- To surface a trending direction alongside live data
Do not use
- In place of a button — if it needs to be tapped or clicked, use a Button instead
- With more than one word — badges are not for sentences or phrases
- As decoration — choose the intent that matches the meaning, not a secondary colour for aesthetics
- With icons other than Up, Plus, or Down
Active
12%
4/6
DoUse intent colours that reflect the meaning of the data
Click to register for this event now
Don’tUse long text or use a badge in place of a button
variants
Positive
PositiveFor success states, active statuses, or upward trends.
Warning
WarningFor caution states that need attention but aren't critical.
Negative
NegativeFor errors, failures, or downward trends.
Neutral
NeutralFor informational labels with no inherent sentiment.
with icons
Use icon badges sparingly alongside data that updates. The three available icons each carry a specific meaning — choose the one that matches the context, not the intent colour.
18%
UpIndicates a value has increased. Pair with positive intent.
4/6
PlusIndicates an addition or a numerical count. Works with positive or neutral.
5%
DownIndicates a value has decreased. Pair with negative intent.