display

Badge

A compact label for status, count, or category metadata.

Badges are the fastest-read elements in a UI. They communicate status and metadata at a glance. Their small size demands precision — every pixel of padding and every shade of colour matters.

Anatomy

  • Background colour
  • Text label
  • Optional icon (left)
  • Optional × dismiss

Variants

Status (semantic colour)Count (number)Category labelNew/beta indicatorDot (notification only)

States

DefaultDismissible (with ×)

Rules

✓ Do

  • •Semantic colours for status (green/red/amber/blue)
  • •Max 2-3 word label
  • •Pair colour with text label always
  • •500-600 weight for legibility at small size

✗ Don't

  • ×Don't use more than 3 badge variants in one context
  • ×Don't use badges for more than 2-3 words
  • ×Don't use colour as the only differentiator

AI Prompt

Paste into Claude, Cursor, Bolt, or v0.

Status badges: 2px/8px padding, 999px radius, 12px/500 weight. Four semantic variants: success (green), error (red), warning (amber), neutral (grey). Each with light bg + dark text from same colour family.