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. |