Skip to content

role presentation

Badge draft v0.1.0

A short piece of text that qualifies the item next to it: a status, a count, a category.

A badge is a small, read-only label attached to something else: the status of an order (Shipped), the number of unread messages, a category tag. It is text with a tinted or filled background; its intent gives the tint a meaning (success, warning, error, info), its emphasis how loud it is. A badge is never interactive: a removable tag or a filter is a different component.

Decisions

From decisions in packages/components/specs/components/badge.spec.json, newest first. Every active decision is implemented by the spec, the tokens, the web implementation and the guidelines.

Variant

  • A badge has two emphases, subtle (default) and accent, and six intents, neutral (default), brand, success, warning, error and info; each pair reads the Figma library's mapped roles for that emphasis and family: fill global.bg.<emphasis>.<family>.default, border global.border.<emphasis>.<family>.default, text global.text.on-<emphasis>.<family>.

    emphasis-and-intent · 2026-10-03 · v0.1.0

    badge.container.background.*badge.container.border-color.*badge.label.color.*

Size

  • A badge is a fully rounded pill with a 0.6 px border, 20 px high with 6 px inline padding and 12 px medium text (small) or 24 px high with 8 px padding and 14 px text (medium, the default).

    pill-sizes · 2026-10-03 · v0.1.0

    badge.container.min-height.*badge.container.padding-inline.*badge.container.border-radiusbadge.container.border-widthbadge.label.typography.*

Behaviour