Badge

The default tone for generic labels with no particular status weight. Use when the badge is purely informational, whether you need a stronger filled style or a quieter outlined style.

Uses the brand tone. Use for labels that should align with the primary identity of the interface in either filled or outlined form.

An alternative emphasis tone. Use to distinguish a small group of labels without relying on a status colour, in either a filled or outlined treatment.

Use to signal a positive state such as completed, approved, or active, with either strong or subtle emphasis.

Use to flag items needing attention without blocking the user — for example, pending review or nearing a threshold — in filled or outlined form.

Use to communicate an error, failure, or critical state that should draw the user's attention immediately, whether as a filled or outlined badge.

A supplementary category tone. Use to differentiate labels when a status colour is not appropriate, in either filled or outlined style.

Another supplementary category tone. Pair with cyan to separate two or more non-status categories, with filled and outlined options available.

Use on dark or coloured backgrounds where the other variants would lack contrast, in either filled or outlined form.

The default filled style uses a solid background. Use when badges need to read strongly at a glance across the full variant set.

The outlined style uses a border with a subtle fill. Use when badges should feel quieter alongside dense content across the full variant set.

Use when the badge is informational only and should not be removed by the user.

Renders a close button. Use for active filters, selected tags, or any context where the user should be able to remove the label.

Use when the text label is enough to convey the badge's meaning.

Add an icon through the icon slot. Use small, recognisable icons that reinforce the badge's meaning without competing with the label.