Components

Badge

Small tag showing status, category, or count. Not interactive — for actionable chips use Button.

Updated Jul 8, 2026 by Leonardo Posada

Variants

New
Draft
Preview
Approved
Declined
Archived
<Badge>New</Badge>
<Badge variant="secondary">Draft</Badge>
<Badge variant="outline">Preview</Badge>
<Badge variant="success">Approved</Badge>
<Badge variant="destructive">Declined</Badge>
<Badge variant="muted">Archived</Badge>

When to use

  • Transaction status (approved, declined, refunded).
  • Category tag next to a title.
  • Small count indicator (e.g. inbox: 4).

When not to use

  • Actionable — use Button or a Chip with close/action.
  • Body text emphasis — use bold or a Callout.

Usage

Do
  • Use the variant that matches meaning: success = approved, destructive = declined.
  • Keep text short (1–2 words).
  • For counts, prefix with the number (e.g. '4 new').
Don't
  • Don't stack more than 2 Badges next to a single title — it becomes noise.
  • Don't make Badges clickable — use a Button variant instead.