Badge
Badges display status labels, tags, and counts with color variants and optional features.
Variants
Five color variants for different semantic meanings.
DefaultSuccessWarningErrorInfo
Sizes
Badges come in sm, md, and lg sizes.
SmallMediumLarge
Features
Badges can display a dot indicator or be removable.
With DotOnlineOfflineAway
Removable (click ✕ to remove)
ReactFlutterTypeScriptDart
Interactive
Pick a variant and toggle dot/removable to see a live preview.
Variant
Options
Preview Badge
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "success" | "warning" | "error" | "info" | "default" | Color variant for semantic meaning. |
size | "sm" | "md" | "lg" | "md" | Size of the badge. |
dot | boolean | false | Shows a small dot indicator before the label. |
removable | boolean | false | Shows a close button to remove the badge. |
onRemove | () => void | — | Callback fired when the remove button is clicked. |
children | ReactNode | — | Badge label content. |