Badge
Small status indicator with semantic colors.
Data DisplayTailwind CSS
Overview
Badges are used to highlight status, categories, or counts in a compact visual form.
When to use
- To display status (active, pending, error)
- To show counts or quantities
- To categorize or label items
Preview
Default
Success
Warning
Error
Info
Usage
html
<!-- Tailwind CSS pattern - copy the HTML/classes below -->Class Variations
Swap these Tailwind classes to change the pattern's appearance:
Variants
| Variation | Tailwind Classes |
|---|---|
| Default | bg-surface-hover text-default |
| Success | bg-success text-success-foreground |
| Warning | bg-warning text-warning-foreground |
| Error | bg-error text-error-foreground |
| Info | bg-info text-info-foreground |
Sizes
| Variation | Tailwind Classes |
|---|---|
| Small | px-2 py-0.5 text-xs |
| Medium | px-2.5 py-0.5 text-xsDefault size |
Guidelines
No specific guidelines documented for this component yet.
Examples
Variants
Default
Success
Warning
Error
Info
With Dot
Online
Offline
Processing