Badge
A versatile badge component for displaying labels, status indicators, and tags with multiple variants, sizes, and shapes.
Variants
DefaultSecondaryDestructiveSuccessWarningInfo
Sizes
SmallMediumLarge
Shapes
PillRounded
With Dot
ActivePendingNewErrorInactive
ActivePendingNewErrorInactive
With Icon
CompletedInformationWarning
With Button
LabelSuccessInfoWarning
Appearances
Default (Solid)
DefaultSecondaryDestructiveSuccessWarningInfo
Light
DefaultSecondaryDestructiveSuccessWarningInfo
Outline
DefaultSecondaryDestructiveSuccessWarningInfo
Ghost
DefaultSecondaryDestructiveSuccessWarningInfo
Custom Colors
Default (Solid)
PurplePinkIndigoTealAmber
Light
PurplePinkIndigoTealAmber
Outline
PurplePinkIndigoTealAmber
Ghost
PurplePinkIndigoTealAmber
API Reference
Badge
Inline label component for displaying status, categories, or counts.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'secondary' | 'destructive' | 'success' | 'warning' | 'info' | 'default' | Color variant of the badge |
| appearance | 'default' | 'outline' | 'light' | 'ghost' | 'default' | Visual appearance style |
| size | 'sm' | 'md' | 'lg' | 'md' | Size of the badge |
| shape | 'pill' | 'rounded' | 'rounded' | Border radius shape |
| className | string | - | Additional CSS classes |
| ...props | React.ComponentProps<"span"> | - | Standard span element props |
BadgeDot
Small circular dot indicator used inside a Badge.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes |
| ...props | React.ComponentProps<"span"> | - | Standard span element props |
BadgeButton
Interactive button element used inside a Badge for actions like dismiss.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes |
| ...props | React.ComponentProps<"button"> | - | Standard button element props |