Geist Design System

Badge

A label that emphasizes an element that requires attention, or helps categorize with other similar elements.

Variants
graygray-subtle
blueblue-subtle
purplepurple-subtle
amberamber-subtle
redred-subtle
pinkpink-subtle
greengreen-subtle
tealteal-subtle
inverted
Trial
Turborepo

Sizes
SmallMediumLarge

With icons
graygraygraygraygraygray
blueblueblueblueblueblue
purplepurplepurplepurplepurplepurple
amberamberamberamberamberamber
redredredredredred
pinkpinkpinkpinkpinkpink
greengreengreengreengreengreen
tealtealtealtealtealteal
invertedinvertedinverted

Pill

A special link, not quite as prominent as a button, based on <Badge /> styling.

LabelLabelLabel
Label Label Label

Best Practices
  • Use Badge for short, scannable metadata that sits next to the thing it describes: status, plan tier, environment, or role. One badge per row; two side by side is a sign the row needs a second column.
  • For a colored dot without text, use Status Dot. For clickable filter chips that toggle a query, use the pill variant or a small Button.
  • Badges are static labels. Don’t wire onClick onto them; promote to a Button or link if the user can act on the value.
  • Keep badge content to text or icon + text. Never stack two icons or a child Badge inside a Badge.
  • Pair lifecycle badges (Alpha, Beta, Early Access) with a Tooltip that names the limit, like Alpha: API may change before GA.
  • Title Case, one word when possible, two max: Active, Pending, Pro, Enterprise Trial. Match the canonical API or log term: Production not Prod, Deployed not Live, Canceled not Cancelled (the Vercel API uses one L).
  • Don’t add a checkmark icon for success states or an X for errors; the variant carries that signal. Map meaning to color: green for healthy, red for error, amber for warning, blue for informational or production, gray for neutral. The -subtle suffix tones any of them down on dense surfaces.
  • Skip stuffing sentences inside (Currently Active, You are on Pro); the surrounding row supplies the context.
  • Set title for icon-only or ambiguous badges so screen readers announce the meaning. Don’t rely on color alone; the text has to be readable without it.