Badge

shadcn/ui

4 variants

Short label for status, count, or category. Not interactive — use Button for clickable chips.

@/components/ui/badge

Variants

Variant	Preview	Description	Usage
default	Default	High-emphasis label — primary brand color	Version tag, featured label, 'New'
secondary	Secondary	Neutral — count, metadata, category	Row count, filter pills, type labels
outline	Outline	Lowest visual weight — subtle tags	Custom chips, optional metadata
destructive	Destructive	Error or danger state	Error count, overdue, urgent flags

With icons

Verified

Failed

Pending

Warning

Custom extension — StatusBadge

StatusBadge extends Badge with Thilo semantic tokens. Same component, different styling layer.

Base Badge

→ extended as →

Open

Blocked

Done

In context

Tickets

3 blocked

Header count pattern — secondary for total, destructive for attention states

Department	Type	Count
BSM	Support	14
Thilo	Internal	9

On this page