Badge
BetaBatch A. A small status label. It is not interactive.
When to use
Use to show a status or a count next to an item.
When not to use
Don't use for categories or filters; use Tag. If it does something, use Button.
Anatomy
Approved
- Container (pill)
- Text
Variants
| Tone | Background | Text |
|---|---|---|
| Draft | background.neutral.subtle | content.secondary |
| New | background.brand.subtle | content.brand |
| Approved | background.positive.subtle | content.positive |
| Failed | background.negative.subtle | content.negative |
| Pending | background.caution.subtle | content.caution |
| Updated | background.info.subtle | content.info |
States
Badges have one state. They cannot be hovered, focused or pressed.