Badge
Badges display status labels, tags, and counts with color variants and optional features.
$cookest-ui add badge
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. |