Visual indicators that communicate status, category, or attribute of an object or element for quick recognition.
Show completion, approval, or progress states at a glance.
Label content types, topics, or groups for quick scanning.
Indicate count or presence of updates, alerts, or new items.
| Component | Primary Use | Interaction | Visual Weight | Example Context |
|---|---|---|---|---|
| Badge | Status, category, count | Minimal/none | Low/medium | Status, labels, notifications |
| Chip/Tag | Filter, selection | Removable, selectable | Medium | Filters, user input, tags |
| Button | Action | Clickable | High | Submit, save, delete |
| Notification Dot | Presence indicator | None | Very low | Unread, online status |
Use concise, single-word labels and clear color coding for instant recognition.
Apply consistent placement, size, and style across the UI for predictability.
Ensure sufficient color contrast, add icons or text for colorblind users, and use ARIA labels.