Badge

Badges are small pill-shaped labels for status, counts, or highlights. Non-interactive, they adapt across brands and modes.

Default Brand Success

Open Badge Playground

Open in Figma

Anatomy

1 2 Brand
  1. 1 Container — pill-shaped background with variant color
  2. 2 Text + optional icon — label content

Options

Variants

Default
Default
Brand
Brand
Success
Success
Danger
Danger

Table of options

PropertyValuesDefault
texttext—
variantdefault / brand / success / dangerdefault
sizemd / smmd
startIconicon name / nonenone

Behaviors

3

Non-interactive

Badges are read-only. They cannot be clicked, focused, or dismissed.

Featured

Optional icon

A leading icon reinforces the badge meaning. It is decorative and inherits the text color.

Usage guidelines

Use the right variant for the meaning

Confirmed

Do

Use semantic variants to communicate status meaning.

Confirmed

Don't

Don't use brand for status — it doesn't convey success or danger.

Content standards

  • Keep text to 1–2 words or a number. Use sentence case. No punctuation.

Keyboard interactions

Badges are non-interactive and not focusable.

Accessibility

  • Badge is a <span> — no interactive role.
  • Icons inside badges are decorative (aria-hidden="true").
  • Color is not the only means of conveying variant meaning.

Theming

Badge adapts across brands and modes through semantic tokens. Use the hero switches above.

For the full theming architecture see Foundations: Theming.

Design checklist

✓
All color themesWorks across light and dark modes.
✓
Accessible use of colorText conveys meaning, not color alone (WCAG 1.4.1).
✓
Accessible contrastText and background meet requirements.
✓
Defined optionsVariant, size, icon documented.
✓
Usage guidelinesVariant selection do/don't.
✓
Design tokensAll visual attributes as tokens.
✓
Figma componentAvailable in Figma library.