Components · Status

Badge Basic

A basic badge is a read-only status or label: “New”, “Archive”, a role name. It is never clickable.

Every example on this page is the real component, not a picture. Figma: Basic, All variants, Guidelines.

Playground

Choose breakpoint, state, emphasis, size, letter case and icon. Mobile and Desktop force the breakpoint values whatever the window width; Window follows the window. Small looks like Medium on mobile.

Breakpoint
Emphasis
Size
Letter case
Icon

Markup for this selection

HTML




Overview
A basic badge is a short, read-only label for a status or a category, such as “New”, “Archive” or a role name. It is the main badge: see the Badge overview for the other types.
This documentation has three pages. Examples & Guidelines (this page) shows when and how to use it. Specifications holds sizes, measurements and tokens. Code shows how to add it to a page.




Usage
When to use
  • Show a status: new, updated, in progress, archived.
  • Label a fixed category, for example a role.
  • Add context next to a heading or a list item.
When not to use
  • For something the user can click: use a tag (TBA) or a button.
  • For a count on an icon in the header: that is the counter .badge.
  • For a message the user must notice: use an inline notification.
Color meanings
Badge has no fixed rulebook for colors, but keep the meaning the same across a project. This is the recommended mapping for lifecycle labels.
MeaningBadgeState · emphasis
Quick reference
The element…Use
shows a status or label and is read onlyBadge
filters or groups when clickedTag (not built yet)
counts something on an icon (cart)The header counter .badge
must be noticed for a state changeInline notification
Do
  • Keep labels short: one or two words.
  • Use the same color for the same meaning everywhere.
  • Pair an alert color with its icon or clear text.
  • Use Medium or Large on mobile.
Don’t
  • Make a badge clickable.
  • Use color only to say “error” or “success”.
  • Use Neutral dark unless you need the weight.
  • Put a long sentence in a badge.




Anatomy
  1. Container. The box. Its color comes from the state and the emphasis; it has a 1px border on Weaker.
  2. Label. Short text, one or two words. Breuer Condensed, weight 500 (600 in upper case).
  3. Icon. Optional. 14px, 4px from the label. Use the alert icon with the alert states.




Variants
Six states in three emphasis levels. Neutral dark is black at every emphasis; Weaker only adds a border-dark edge.
Size
Case
StateStrongWeakWeaker
With an icon
Use the alert icon with the alert states, so color is never the only carrier of meaning. The icon is 14px with a 4px gap.
Info, Success, Warning and Danger with their icons.
Letter case
Sentence case (weight 500) for statuses. Upper case (weight 600) for fixed categories, where the extra weight helps. It is a choice per badge, not per state.
Sentence case and upper case.




Sizes
Three sizes. Large and Medium look different on mobile and desktop. Small is the same size as Medium on mobile. The values are on the Specifications page.
Large, Medium and Small.




Accessibility
A badge is text. All requirements are listed under Accessibility Requirements in Specifications.
Not interactive
A badge is never a link or a button. It gets no focus and no hover state.
Color is not the only carrier
Pair an alert color with its icon or with clear text (WCAG 1.4.1). Mixed emphasis helps tell text-only badges apart.
Screen reader support
The text of the badge is read as it is. The icon is decorative (aria-hidden="true").







References