Badge

Preview

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.

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.

Variants

Variants define the visual appearance of components and communicate the priority of the action or information they represent. Some common variants are provided out of the box (see the table below), but you can also create new variants to match your system's needs.

Variants are created and managed through variable modes in the design system tokens.

Context

Context modes extend the visual identity of components by applying semantic meaning through color. Each context type communicates a specific purpose or state, helping users understand the intent of their actions.

Available context types:

• Brand: Primary actions and key interactions or communications (default)
• Neutral: Standard actions or communications without specific semantic meaning
• Positive: Success states, confirmations and constructive actions and communications
• Negative: Destructive actions or communications, errors and warnings that require caution
• Caution: Warning states and actions or communications that need user attention
• Info: Informational actions or communications.

Context is applied through CSS classes (e.g., moon-badge-positive, moon-badge-negative) and automatically adapts the button's colors to match the semantic meaning across all variants (fill, soft, outline, ghost).