Badge
Visual indicators that communicate the status of a component.
Badges provide brief information, statuses, or counts related to an item or element. They can be used to draw attention to new or important information, such as notifications, messages, or updates.
Also known as: Info tag.
Anatomy
A. Icon (optional): Leading icon used to represent badges that can be used with or without a label.
B. Label (optional): Brief text providing information about a specific item or element.
C. Background color (required): Visual indicator to help convey the badge status.
Usage
| Component | When to use | When not to use |
|---|---|---|
| Label badge | If text is needed to describe the status. | If the text is too long or complex. |
| Number badge | To indicate counts of the element it’s tied to, like notifications. | If the count doesn’t provide meaningful information to the user. |
Best practices
- Ensure badges are static and not interactive.
- Ensure badges are easily noticeable but don’t obscure their associated element or other important information.
- Avoid using badges if they add complexity, ambiguity, or visual noise.
- Ensure the label text, icons, and background color collectively convey the badge information accurately.
Do Keep badge labels short and succinct.
Don't Use verbs within badges as they could be mistaken for an interactive element like a button.
Label badges
Label badges use text to convey information. Ensure the label and background color match to accurately convey the badge information. For example, only use the yellow background color to convey warning information.
Label and icon badge
Use icons to indicate status or condition of an element, especially for common meanings.
Label badge with ellipse
Use the ellipse indicator when more visual emphasis is needed and intuitive icons aren’t available.
Number badges
Number badges are small, circular badges that only convey a count or number. They’re commonly used to indicate notifications. They can be paired with UI icons such as the notification bell or with other components such as tab bars. They’re tied to the element that it represents the count for.
Placement
Badges are typically placed alongside the element they are supporting or calling attention to.
Section notifications
Section notifications group related messages to help organize large numbers of notifications. A number badge can be attached to different sections to show unread items. When a user navigates to a section, the notifications appear, and the badge disappears. Not all sections may need notifications, so consider whether a global notification system might work better for your application.
Platform considerations
Mobile
In mobile designs, badges can appear as an individual ellipse when the number badge is too large compared to the component or icon. In this scenario, the badge indicates that one or more notifications are available, but doesn’t indicate how many or provide specific status updates.
Content
- Use simple language—avoid abbreviations or jargon.
- Write all content in sentence case, except for acronyms or proper nouns.
- Don’t use punctuation for badge labels.
- Limit labels to a few short words.
- Reference Grammar and punctuation to learn how to use parallel structure for consistent phrasing.
