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