Badge
Displays a badge or a component that looks like a badge.
Example
Variant | Default | Primary | Accent | Success | Warning | Danger |
|---|---|---|---|---|---|---|
Default | Badge 5 Badge 5 | Badge 5 Badge 5 | Badge 5 Badge 5 | Badge 5 Badge 5 | Badge 5 Badge 5 | Badge 5 Badge 5 |
Subdued | Badge 5 Badge 5 | Badge 5 Badge 5 | Badge 5 Badge 5 | Badge 5 Badge 5 | Badge 5 Badge 5 | Badge 5 Badge 5 |
Surface | Badge 5 Badge 5 | Badge 5 Badge 5 | Badge 5 Badge 5 | Badge 5 Badge 5 | Badge 5 Badge 5 | Badge 5 Badge 5 |
Outline | Badge 5 Badge 5 | Badge 5 Badge 5 | Badge 5 Badge 5 | Badge 5 Badge 5 | Badge 5 Badge 5 | Badge 5 Badge 5 |
Usage
Badge Props
Displays a badge or a component that looks like a badge Features: - Multiple color variants: default, primary, accent, success, warning, danger - Style variants: default, outline, surface, subdued - Size options: sm, default - Optional interactive state with hover effects - Can be rendered as a different element via asChild prop
| Prop | Type | Default |
|---|