Primitives
Primitive
Badge
Small count and labeling component for displaying status or metadata
A badge is a small label for status, counts, or metadata. Use it to tag an item's state (Active, Beta, Failed), show a count, or annotate a row in a list or table.
Preview
Badge
Installation
Usage
Examples
Variants
Use variant to set the badge's color and meaning.
DefaultNeutralSecondaryOutlineSuccessWarningInfoDanger
| Variant | Description |
|---|---|
default | Solid primary badge, the highest emphasis. |
neutral | Solid neutral badge with no brand color. |
outline | Bordered badge on the page background. |
secondary | Lower-emphasis tinted badge. |
success | Positive state such as completed or online. |
warning | Cautionary state that needs attention. |
info | Informational, non-urgent state. |
danger | Error or failed state. |
Sizes
Apply utility classes to adjust the badge's text size and padding.
SmallDefaultLarge
With Icons
Place an icon inside the badge to reinforce its meaning.
PendingCompleted
API Reference
Badge is a custom styled span. All props are custom or standard span attributes passed through.
Props
Badge
Small label for status, counts, or metadata.
Prop
Type
Default