Skip to content
Beta

Badge

Read-only

A small label for a status or supporting information.

Playground

In progress

Properties

Changes apply to this example.

All tones

With a leading icon
Unavailable
Neutral
In progress
Primary
Approved
Success
Needs review
Warning
Failed
Danger

Text only

Same tones, no icon
Unavailable
Neutral
In progress
Primary
Approved
Success
Needs review
Warning
Failed
Danger

Content

Quote Q-1042 Accepted
Labels and statuses
Waiting for the source of funds documents
Long labels truncate; icons stay visible

Usage

Use words that make sense without colour. A badge shows information and has no hover, focus, disabled or loading states.

Leading icons inherit the label colour. “Unavailable” describes a status; it does not disable or fade the badge. Badges use a filled background, with no outline variant.

Label string
The text to display. Required.
Tone BadgeTone
Neutral, Primary, Success, Warning or Danger. Defaults to Neutral.
Icon string?
Optional name from the beta icon registry. The badge owns its size, spacing and colour; the label supplies its meaning.

Source Components/Beta/Badge/