Skip to content

Badge

Badges are compact visual indicators used to highlight status, categories, or counts.

Quarantine

DesignDevelopAccessibility

Badges are compact, non-interactive indicators that label an item with a status, category, or count. They sit alongside the content they describe — a name, a list item, an icon — and carry their meaning in a short piece of text, a semantic colour, and an optional icon. Reach for a badge to surface a small piece of at-a-glance information, not to trigger an action or offer a choice.

Anatomy

Section titled “Anatomy”
Success
  1. Badge
  2. Icon
  3. Label

The Badge container carries the shape, fill, and border that set the badge apart from its surroundings. The Icon is optional — status badges pair a decorative icon with the label to reinforce meaning without relying on colour, and a count badge drops it entirely. The Label holds the text, count, or accessible name that tells the user what the badge means.

When to use it

Section titled “When to use it”

Use a badge when:

  • You need to flag the status of an item — success, error, warning, or an informational note.
  • You want to show a count, such as unread notifications or items in a cart.
  • You’re labelling an item with a short, read-only category or tag.
  • The information supports the content it sits beside rather than standing on its own.

Avoid a badge when:

  • The element should be selectable or dismissible — reach for a Chip instead.
  • The user needs to trigger an action — use a Button.
  • The label carries a long string of text; badges are sized for a word or two.
  • The meaning lives only in the colour, with no text or icon to back it up.

Properties

Section titled “Properties”

Type

Three types cover the range: a text badge labels an item with a word or short category; a status badge pairs a semantic colour and icon with a label to signal state; and a count badge shows a number. Each keeps the same pill shape and only swaps fill, border, and content.

Status

Status badges come in five semantic types — Neutral, Error, Success, Warning, and Info — each with its own foreground, muted fill, and border token so the meaning reads consistently across themes. Every status but Neutral carries a leading icon (a cross for error, a check for success, and so on) so the state survives in greyscale and for colour-blind users.

Count

A count badge renders a number in one of two styles — Filled, a solid emphasis fill with light text for high visibility, and Outlined, a light fill with a border for a quieter treatment — in Large and Small sizes to match the density of the surface it sits on.

Emphasis

Beyond the default treatment, a Subtle variant lowers the badge’s emphasis for dense layouts where a full-strength badge would compete with the content, and a Contrast fill flips the badge for placement on dark or busy backgrounds. Match the emphasis to how much attention the badge should pull.

Platform considerations

Section titled “Platform considerations”

Desktop

Badges sit inline next to the item they describe — a table cell, a list row, a heading. Keep them close to their subject so the association is obvious, and let the small size keep the layout tight.

Tablet

The same inline placement works, with a touch more breathing room around dense clusters. Badges take no touch target of their own since they’re non-interactive, so they can stay compact.

Mobile

Space is tight, so favour count and status badges that carry meaning in a glyph or a single word. Let badges wrap with their content rather than truncating, and keep the text legible against whatever surface they land on.

Best practices

Section titled “Best practices”

Badges work best when they stay small and unambiguous — one idea per badge, backed by text or an icon rather than colour alone.

Do

Keep labels to a word or two, pair every status colour with an icon or text so the meaning survives in greyscale, and place the badge right beside the item it describes. Use the semantic status type that matches the meaning, and reach for the subtle or contrast treatment when the surface calls for it.

Don't

Don’t make a badge interactive — if it should be clicked, toggled, or dismissed, it’s a chip or a button. Don’t rely on colour alone to carry the status, don’t pack a sentence into a badge, and don’t scatter so many badges around one item that none of them stands out.

Content guidelines

Section titled “Content guidelines”

Badge text should be short and scannable — ideally one or two words in sentence case, with no trailing punctuation. Name the status or category in plain language (“In stock”, “Overdue”, “Beta”) and keep labels parallel across a group so they read as a set. For count badges, show the raw number and cap large values with a “+” suffix (for example “99+”) rather than letting the badge grow. When a badge’s meaning isn’t obvious from a bare glyph or number — a count, an icon-only status — make sure its accessible name spells the meaning out.