Feedback
Badge
A small label for statuses, counts, and tags.
A small label for statuses, counts, and tags. CSS-only.
Playground
Active
Intents
neutral
primary
danger
success
warning
info
Props
The framework bindings expose these props (and forward the rest to the root element).
| Prop | Type | Default | Description |
|---|---|---|---|
intent | 'neutral' | 'primary' | 'danger' | 'success' | 'warning' | 'info' | 'neutral' | Color role. |
variant | 'soft' | 'solid' | 'outline' | 'soft' | Fill style. |
size | 'sm' | 'md' | 'md' | Badge size. |
CSS variables
Override these on any ancestor to theme the component. See the theme studio to preview changes live.
| CSS variable | Used for |
|---|---|
--hl-primary | Accent for the chosen intent. |
--hl-radius-full | Pill corner radius. |
Accessibility
- A badge is decorative text; if it conveys status, include that meaning in nearby copy too.