- Guidelines
- React API Reference
- Blazor API Reference
Badges are small visual indicators used to highlight status, quantities, or categories. They draw attention to important metadata or state information within the interface.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use badges to indicate status, counts, or categories. They should highlight important but supplementary information. |
| Content | Keep content extremely concise—typically a single word, number, or very short phrase. Avoid long text that may truncate. |
| Behavior | Badges should be static elements that don’t change frequently. For dynamic content that changes often, consider other components. |
| States | Use appropriate variant styling to indicate different states or categories. Ensure sufficient contrast against background elements. |
| Feedback | Static visual feedback only. Badges are generally not interactive elements. |
| Examples | Status indicators (New, Active, Pending), count indicators (notifications, items), category labels, or version tags. |
Best Practices
- Visual Prominence: Badges should be visually distinct but not dominate the interface or distract from primary content.
- Concise Content: Use the minimum text necessary to convey meaning—ideally single words or numbers.
- Consistent Application: Apply badges consistently across the interface for similar types of information.
- Appropriate Variants: Choose variant styling that matches the meaning of the badge (e.g., destructive for error states).
- Strategic Placement: Position badges close to the relevant content they describe or augment.
Do’s and Don’ts
Do
- Use badges for supplementary information or status.
- Keep content extremely concise.
- Choose appropriate variant colors for different statuses.
- Position badges close to related content.
Don't
- Overuse badges throughout the interface.
- Use badges for primary content or lengthy text.
- Use inconsistent styling for similar types of badges.
- Make badges interactive elements (use buttons or links instead).
Additional Guidance
- Psychological Impact:
- Visual Hierarchy: Badges create focal points in the interface that draw attention to specific information.
- Cognitive Processing: Well-designed badges allow users to quickly scan and categorize information without reading detailed content.
- Recognition Patterns: Consistent use of badge styles helps users quickly recognize and understand different states or categories.