Badges
Badge components for displaying status, labels, and metadata.
Badge Variants
PrimarySecondarySuccessWarningInfoDestructiveOutline
Different variants communicate different meanings: success for positive, warning for caution, destructive for errors.
Light Appearance
PrimarySecondarySuccessWarningInfoDestructive
Light appearance badges are softer and less prominent, good for secondary information.
Outline Appearance
PrimarySuccessWarningInfoDestructive
Outline badges have a subtle border and background, ideal for less prominent labels.
Badge Sizes
Extra SmallSmallMediumLarge
Badges come in four sizes to match different contexts and information density.
Badge with Dot
Active Pending Offline Neutral
Dot indicators add visual emphasis to status badges.
Badge with Icons
Completed Failed
Icons can be added to badges for additional visual context.
Circular Shape
DefaultSuccessError
Circular badges are fully rounded, suitable for tags and labels.