Badges
Badges are either subtle or bold and use color to indicate meanings that users can learn and recognize across products.
Section titled “ Design”Animation effect
Section titled “Animation effect”
Section titled “ In Practice”Selecting the badge’s shape and color
Section titled “Selecting the badge’s shape and color”- Use pills to display only counts.
- Use critical badges sparingly and reserve them to display only counts like unread notification or unresolved issues.
Section titled “ Accessibility”- Text must be clear enough for color blind users to be able to understand immediately without needing to rely only on the color.
- Avoid using badges for longer text. Badges are not focusable, so the text truncated after 200 (or the custom maxWidth value) pixels will not be accessible.