Badge
Badges are used to display important information or status in a compact, visually distinct way. They can be used to show counts, status indicators, or important labels.
Default
Success
Warning
Danger
Info
Neutral
Disabled
Default
Success
Warning
Danger
Info
Neutral
Disabled
Solid
Opaque
Small
Medium
With Icon
Dismissible
Prop | Type | Default value |
|---|---|---|
Prop text | Type ReactNode | Default value The text or content to display in the badge |
Prop state | Type "default" | "success" | "neutral" | "danger" | "disabled" | "warning" | "info" | Default value The visual state of the badge |
Prop size | Type "sm" | "md" | Default value The size of the badge |
Prop type | Type "opaque" | "solid" | Default value The visual type of the badge |
Prop icon | Type IconName | Default value Icon to display in the badge |
Prop iconDir | Type "left" | "right" | Default value Direction of the icon relative to the text |
Prop dismissible | Type boolean | Default value Whether the badge can be dismissed |
Prop onClose | Type (e: MouseEvent<HTMLOrSVGElement>) => void | Default value Callback when the dismissible badge is closed |
Prop ellipsisContent | Type boolean | Default value Whether to truncate long content with ellipsis |
Variants
States
Default
Success
Warning
Danger
Info
Neutral
Disabled
Types
Solid
Opaque
Sizes
Small
Medium
With Icons
Left Icon
Right Icon
Dismissible
Dismissible