Badge

Small status indicators and labels with various styles.

Badge

Examples

Variants

DefaultSecondaryDestructiveOutlineSuccessWarning

Sizes

SmallMediumLarge

With Icons

CompletedFailedWarningFeatured

Dot Indicators

Online
Away
Offline

API Reference

PropTypeDefaultDescription
variant'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning''default'The visual style variant of the badge.
size'sm' | 'md' | 'lg''md'The size of the badge.
roundedbooleanfalseWhen true, makes the badge fully rounded (pill shape).
dotbooleanfalseWhen true, displays as a small dot indicator.