Badges highlight status, counts, or metadata. Small but essential in SaaS dashboards for notifications, filters, and status columns.
| Variant | Style | Use |
|---|
| Status | Colored dot + text | ”Active”, “Pending”, “Failed” |
| Count | Number in circle | Notifications, unread messages |
| Label | Text only | Tags, categories, filters |
| Color | Meaning | Example |
|---|
| Green | Success, Active | ”Completed” |
| Blue | Info, In Progress | ”Running” |
| Yellow | Warning, Pending | ”Review” |
| Red | Error, Failed | ”Failed” |
| Gray | Neutral, Default | ”Draft” |
| Size | Height | Font |
|---|
| sm | 20px | 11px |
| md | 24px | 12px |
- Scannable — badges should be recognizable at a glance
- Don’t overuse — too many badges dilute meaning
- Accessible — don’t rely on color alone; include text label