Badge

Resources

Properties

Best practises

• Timely updates: Ensure badges are always current. Remove a badge as soon as the notification or status is addressed. New feature badges should only be visible for up to 30 days after the user's last sign-in to maintain relevance.
• Meaningful use: Use badges sparingly and only for critical updates that users need to address. High-frequency or rapidly increasing numbers can cause stress and anxiety, so consider using a maximum indicator (e.g., 999+) or switching to a dot badge in such scenarios.

When to use

Use badge to indicate applied filters, new notifications or updates.

When the information or notification is critical, use alert or dialog instead.
If the badge lacks context, ensure that the user understands what it means.

Types

Numeric badge

Numeric badge uses numbers to notify users of unread messages, notifications, or items requiring attention. It is more eye-catching than a dot badge and provides a clear, concise count. Use numeric badges to:

• Notify of new content in important entry points like missed notifications or messages.
• Quantify items in a shopping cart or the number of filters applied. Numeric badges can be configured to use “+” when the amount of notifications exceeds a maximum characters.

Dot badge

Dot badge is a small, colored indicator without numbers, used to signify new notifications or statuses when the exact count is unknown or irrelevant. It draws attention to:

• New updates in high-activity areas (e.g., activity feeds).
• Status changes (e.g., read/unread notifications, transaction statuses).
• Encouraging exploration of new features or services. Consider using a dot badge for updates that increase quickly and with high frequency.

Positioning

Badges can be positioned absolutely to overlay assets or sit in line with other content to take up space in the layout.

• If used with an icon, badge should be anchored inside icon bounding box, top right corner by default.
• When the number count of numeric badge increases, it will remain in the position, but its width expands.

Semantics

Semantics refers to the meaning and intent behind design elements. Select the appropriate type of semantics through modes to communicate the right message effectively. Users have the possibility to add new variants or customize the visual aspect through tokens and token modes.