Badge
An inline component that visually displays status, labels, categories, and similar. Use it next to text to convey supplementary information or to indicate the state of list items.
Preview
PrimarySuccessWarningDanger
Examples
Variant
Controls the visual emphasis level of the badge.
| Value | Default | Description |
|---|---|---|
solid | ✓ | Filled background. Use for states that need the most emphasis. |
outline | Border only. Use for states with medium emphasis. | |
subtle | Light background. Use for supplementary information with low emphasis. | |
weak | Lightest background. Use for tags with low contrast against the background. |
SolidOutlineSubtleWeak
Intent
Controls the semantic color of the badge.
| Value | Default | Description |
|---|---|---|
primary | ✓ | Primary categories and core information. |
secondary | Secondary categories and supplementary information. | |
success | Completion, normal, or active state. | |
warning | Caution or incomplete state. | |
danger | Error, inactive, or danger state. | |
neutral | Neutral state. |
PrimarySecondarySuccessWarningDangerNeutral
Size
Controls the badge size. Choose based on the size of adjacent text or components.
| Value | Default | Description |
|---|---|---|
small | For secondary labels next to body text. | |
medium | ✓ | Most versatile size. |
large | For use with larger components. | |
xlarge | When heading-level size is needed. |
SmallMediumLargeXLarge
Rounded
Controls the corner radius of the badge.
| Value | Default | Description |
|---|---|---|
small | Small corner radius | |
medium | ✓ | Default corner radius |
large | Large corner radius (pill-like) |
Show dot
Shows a status dot before the badge. Use when indicating real-time state changes or notifications.
- Type:
boolean - Default:
false
ActiveErrorPending
Guidelines
Choosing variant
- solid: Use when information needs clear emphasis. Suitable for list status indicators, count badges near CTAs, and similar.
- outline / subtle / weak: Use for lightweight tags or category labels next to text. Avoid over-emphasizing on the screen.
Using the dot
Use showDot to indicate real-time status. Recommended patterns: success ↔ online/normal, danger ↔ error/offline, warning ↔ caution.
Props
Props
Prop
Default
Type
size?"medium""small" | "medium" | "large" | "xlarge"
variant?"solid""solid" | "outline" | "subtle" | "weak"
intent?"primary""primary" | "secondary" | "success" | "warning" | "danger" | "neutral"
rounded?"medium""small" | "medium" | "large"
showDot?falseboolean
children—
ReactNode
Last updated on