Root Props
| Prop | Type | Default |
|---|---|---|
variant | BadgeVariant | 'success' |
| Semantic color style of the badge. Indicates the meaning or status represented by the badge. 'success': For positive/confirmed status; 'error': For error/negative status; 'warning': For cautionary/in-progress status; 'info': For neutral/informational status | ||
appearance | BadgeAppearance | 'ghost' |
| Visual appearance of the badge. Defines how the badge is styled (background, border, etc.). | ||
size | BadgeSize | 'md' |
| Size of the badge. Affects padding, font size, and overall dimensions. | ||
Also accepts ref and all <div> attributes.
Child Parts
Badge does not expose public child parts.
Types
BadgePropsBadgeSizeBadgeAppearanceBadgeVariant
State Model
Badgeis stateless from the component API perspective.- Consumer state usually drives which variant or text is shown.