Badge
Compact label for statuses, categories, and metadata.
Quick Preview
DefaultApprovedPendingOverdue
Usage
<Badge variant="success">Approved</Badge>Examples
Variants
Use variant to communicate neutral, accent, informational, success, warning, or danger status.
DefaultAccentInfoSuccessWarningDangerOutline
Accent Badges
Use variant="accent" for filled highlight badges such as best-value, featured, or promoted labels. Add an inline icon before the label or render the icon by itself with an accessible label for compact spaces.
Best value
Sizes and Shape
Use size, shape, and border to match the surrounding density and emphasis.
SmallMediumLargeBoxNo border
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
variant | `"default" | "accent" | "secondary" |
size | `"sm" | "md" | "lg"` |
shape | `"round" | "box"` | "round" |
border | boolean | true | Adds an outlined edge when supported. |
iconOnly | boolean | false | Removes inline padding so the badge renders as a compact circle or square. |
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to the underlying root or primitive. |
Accessibility
- Provide visible labels or accessible names for interactive controls.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.