Badges
Eight tones × three variants — soft, outline, solid — with dots, icons, sizes, and count badges.
Soft Variant
Tinted background + matching text — the default style
brandsuccesswarningerrorgraypurplepinkorange
Outline Variant
Hairline border + colored text — minimal and airy
brandsuccesswarningerrorgraypurplepinkorange
Solid Variant
Filled background + white text — strongest emphasis
brandsuccesswarningerrorgraypurplepinkorange
With Dot
Pulsing dot for status indicators
brandsuccesswarningerrorgraypurplepinkorange
OnlineAwayOfflineSynced
With Icon
Use icons to add semantic meaning
brandsuccesswarningerrorgraypurplepinkorange
Sizes
Three sizes via the className override
brandbrandbrand
purplepurplepurple
pinkpinkpink
Count Badges
Numeric indicators — inbox, notifications, comments
9
24
99+
New · 12Updated · 4Archived · 87Pending · 3
Usage Examples
Real contexts where badges shine
Pro account
Premium tier active
Subscription
Expires in 7 days
Deploy
Build #2349 succeeded