Badges & tags
Statuses, semantic labels, counts, and removable tags.
Color and style matrix
6 colors · 3 stylesColorSolidSoftOutline
PrimaryPrimaryPrimaryPrimary
SuccessSuccessSuccessSuccess
DangerDangerDangerDanger
WarningWarningWarningWarning
InfoInfoInfoInfo
NeutralNeutralNeutralNeutral
Solid badges
PrimarySuccessDangerWarningInfoNeutral
High-emphasis labels for important states and compact calls to attention.
Soft badges
PrimarySuccessDangerWarningInfoNeutral
Low-emphasis tinted surfaces suitable for tables and dense cards.
Outline badges
PrimarySuccessDangerWarningInfoNeutral
Transparent variants that preserve the surrounding card surface.
Pill badges
PrimaryCompletedBlockedNeutral
Dot badges
OnlinePendingBusyOffline
Icon badges
VerifiedAutomatedFeaturedPrivate
Status badges
ActivePendingReviewInactive
Sizes
Compact scaleExtra smallSmallMediumLarge
21299+
Shape variants
SquareSubtleDefaultRoundedPill
N
Notification badges
6+9
Avatar badges
PRO
Counter badges
24Tasks
8Alerts
99+Updates
Removable tags
DesignDashboardPriorityResearch
Selectable tags
1 selectedSelection updates locally and supports multiple tags.
Security
VerifiedEncryptedPrivate
Trending
TrendingPopularNew
Label combinations
BUILDPASSINGVERSION2.8.0