Badge
A small inline pill label. Use color modifiers to convey status or category.
Basic usage
blue badge: New
green badge: Active
red badge: Error
yellow badge: Warning
gray badge: Draft
purple badge: Beta
Inside a card
Badges in a row never stretch — they always shrink to fit their content:
row:
1/2 card:
## Pro plan
blue badge: Popular
Full access to all features.
full primary button: Start Free Trial
1/2 card:
## Free plan
gray badge: Limited
Perfect for solo projects.
full outline button: Get Started
All color variants
blue badge: New
red badge: Error
green badge: Active
yellow badge: Warning
purple badge: Beta
gray badge: Draft
Reference
| Modifier | Effect |
|---|---|
blue | Blue background |
red | Red background |
green | Green background |
yellow | Yellow background |
purple | Purple background |
gray | Gray background |