Skip to content

Badge

Status – Label

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

  • CSS

Maintained by Platform

Ready to use

DesignCSSAccessibility

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

Two types cover the range: a status badge labels an item with a word or short category and, where it carries a state, a semantic colour and icon; a count badge shows a number. Both keep the same pill shape and only swap fill, border, and content.

Status

Status badges come in five semantic types — Neutral, Error, Success, Warning, and Info — each with its own muted fill and border token so the meaning reads consistently across themes. Neutral is the plain-text case and carries no icon; the other four take a leading icon that picks up the border colour (a cross for error, a check for success, an exclamation for warning, an “i” for info), so the state survives in greyscale and for colour-blind users. The label itself stays neutral in every type — the colour lives in the fill, the border, and the icon.

Count

A count badge renders a number in one of two styles — Filled, a solid dark fill with light text for high visibility, and Outlined, a light fill with a border for a quieter treatment. It keeps the badge’s pill shape but takes a square aspect ratio, so a single digit reads as a circle.

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 filled count treatment only when the number genuinely needs to pull attention.

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.