Badges
Badges are compact labels that convey status, categories, or metadata. They draw attention to important attributes without requiring user action.
Variants
Choose variant by emphasis: default for primary status, tonal for soft green emphasis, elevated for layered surfaces, and outline for neutral taxonomy.
Sizes
Small for dense UI, default for general use, and large for hero callouts and section-level labels.
With Icons
Pair badges with leading icons for immediate recognition of status.
Semantic Status
Combine variant styling with semantic colors for workflow states.
Interactive
Add interactive to opt-in to hover & active states. Use this instead of overriding with ad-hoc Tailwind classes so hover behaviour stays consistent across themes.
Contextual Usage
Badges work best inline with other content—titles, list items, and card headers.
Production Deploy
Deployed 2 hours ago by @eugen
Staging Deploy
Building from branch feature/auth