Badge

Badge communicates system-generated counts to make the user aware of new items or items that need attention.

Overview

Badge reports system-generated numerical information to users using a small indicator that can be attached to an element or float next to an element.

Anatomy

Badge anatomy
  1. Container: Holds the label.
  2. Label: Presents the system-generated numerical information.

Demo

Storybook failed to load. Please connect to the VPN to access.

Open the component in Figma.

When to use

  • When reporting item counts.
  • For reporting items that are new to the user or need attention.

When not to use

Similar components

Variants

Default

Use this standard badge for the majority of badge use cases.

Default

Attention

Use to call attention to the badge, especially if the component includes brand color. For example, primary buttons. There’s also an inverted version of this variant built into the component to use when inverse contrast is needed.

Attention

Danger

Used only for the highest priority critical items that require a user’s attention. Avoid repeating it too often within the same flow — when everything’s important, nothing is important.

Danger

Behaviors

Placement

Badges are always placed to the right of an element, whether attached or floating. When internationalized for RTL languages, this reverses to the left.

Placement

Visibility

The badge hides automatically when <badgeContent> is zero. You can override this with the <showZero> prop.

Numerical label

Systematically, the label is limited to show three digits maximum. When the number exceeds three digits, then the label automatically includes a +. The default maximum is 100+.

For performance reasons, the numerical label maximum can be less than 100. The maximum can be set at 10, or an increment of 10. Any higher number will show as 10+, etc. For example, Authentication and Profile Enrollment cap the policies badge at 20. When there are more than 20, the badge displays 20+. Change the default maximum carefully. If badges in the same screen or feature have multiple maximums, it can create a confusing mental model for users.

Dismissal

When a badge is used to indicate an item that needs attention, like an unread notification, the badge is hidden after it has been selected.

States

Default

The default state indicates that there are counts, but the parent item of the badge isn’t selected.

States - Default

Active

The active state indicates the parent item of the badge is selected.

States - Active

Accessibility

Odyssey components are designed and built to meet accessibility requirements out of the box. So, designers and engineers can focus on any accessibility concerns unique to their problem areas.

Our components meet WCAG 2.2 AA criteria and WAI-ARIA guidelines to provide a usable and accessible experience to everyone.

Content guidelines

Content is system generated. Designers do not need to create content.

Label

  • A label must be included.
  • Systematically, limited to three digits maximum.
  • If the number exceeds three digits, then the label automatically includes a +. For example, 100+.

Content accessibility

Provide a description with <aria-label>. Numerical badges will have their label number read.

  • If relevant, include badge announcements by selecting corresponding navigation destinations.

Figma: Badge