All components

Badge

Compact status label.

Full API on ui.shadcn.com

Variants

Six stock variants: default (primary emphasis), secondary (neutral), destructive (danger), outline (low emphasis), ghost (hover-only), link (text affordances).

DefaultSecondaryOutlineDestructiveGhostLink
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="ghost">Ghost</Badge>
<Badge variant="link">Link</Badge>

With icon

Drop a Lucide icon as the first child. The badge auto-shrinks any svg child to size-3.

Verified
<Badge variant="secondary"><Check /> Verified</Badge>

With spinner

Compose with Spinner for in-flight states.

Saving
<Badge variant="secondary"><Spinner /> Saving</Badge>