Skip to main content

Badge

A Badge/Neutral presents short, contextual information using a neutral visual style.

When to use​

  • Use when you need to label or quantify items without drawing strong attention.
  • Use for status or count that is informational rather than critical.

When not to use​

  • Don’t use for errors, warnings, or successes; choose a colored badge variant instead.
  • Don’t rely on the badge alone to convey meaning; provide accompanying text if the information is essential.

Anatomy / variants​

VariantDescriptionWhen to use
NeutralGray background with dark text, no decorative emphasis.For informational or non‑critical labels.

Props / API​

This component does not expose any configurable props.

Accessibility​

  • Include clear, readable text inside the badge; do not rely on color alone to convey meaning.
  • Ensure the color contrast meets a minimum of 4.5:1 against the background.
  • If the badge conveys status, pair it with an accessible label (e.g., aria-label) that describes the status.

Changelog​

  • 2026-07-01 — Initial doc generated from Figma.