display contract

Badge

Small status pill — for state on a card, list row, or inline tag.

Variants

  • default
  • primary
  • success
  • warning
  • destructive
  • outline

Sizes

  • sm
  • md
  • lg

Example

<Badge variant="success">Active</Badge>

Usage rule

Badge label is uppercase with 0.5px tracking when ≤ 12 chars; sentence case otherwise.

The full Badge contract has 3 more rules and 1 more example, plus the do-not patterns. Get the full recipe.

Get the Badge contract in your project.