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
Prop | Type | Default | Description |
---|---|---|---|
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. |
rounded | boolean | false | When true, makes the badge fully rounded (pill shape). |
dot | boolean | false | When true, displays as a small dot indicator. |