Components
Badge
Indicator of values such as labeling or notification
Anatomy
Badges are indicators of static information. They can be updated when a status changes, but they should not be actionable.
- Icon : to support the label on the badges either with icon.
- Label : a text to provide context or information to the user. Works best when short.
Usage
Badges are typically used to reflect counts like number of objects, number of events, or number of unread items. If you need a selectable annotation consider using a label instead. They are often found in filter toggles to indicate the number of selections that have been made in a toolbar filter or select list.
Common places badge appear: Card, Notification, Avatar, etc.
When to use
- Make attention to details and makes it easy to scan.
- To present information, such as status.
- Always position badge so that it’s clear to understand what object it’s related to.
When not to use
- If there’s an interaction (such as add/remove).
- If the entire message has an associated action.
- Don’t make badges clickable. Instead use button or chips component’s small variant.
Accessibility
A badge is used to annotate other information like a label or an object name. Badges are typically used to reflect counts, like number of unread notifications. Badges are not interactive. As a caution, badges can be styled using a variety of colors. Do not rely on color alone to communicate information because it causes barriers to access for many readers. For example, colorblind and low vision users may not be able to perceive the color differences, and screen readers do not announce colors to non-sighted readers.
Do : Left Icon
Use icon on the left only to provide information
Don't : Right Icon
Use right icon unless there is an interaction
Content
When creating badge :
- Use only two words if you need to describe a complex state.
- Don’t use special characters as part of badge text.
- Use past tense to describe the status of an action that is completed.
- Each badge should only indicate one status. Do not combine icons or text statuses into one badge.
Do : With short copy
Write short and meaningful label, they’re great for indicating status or how much of something is selected. But you can’t fit a lot into that space
Don't : With long copy
Write long and excessive label information. Badges are small and can’t contain much information
Do you have feedback?
Please let us know to make it better