Badge

Badges serve the purpose of swiftly indicating the status of an item.

What the component handles

Meets contrast requirements on all background.static.xxx tokens except for background.static.inversed and background.static.on-color.

When overlaying the Badge with another component, use the outline property to maintain a proper color contrast with the adjacent colors.

What you need to provide

accessibleText prop with descriptive context (e.g., "5 notifications", "3 unread messages", "New update available")

For badges that appear dynamically: add role="status" or aria-live="polite" to announce the change

Color contrast

Meets the WCAG 2.1 AA color contrast ratio requirements and can be used on the following:

background.static.xxx tokens except for background.static.inverse and background.static.on-color

in all Card variants,

in Banner components.

Do

When the Badge overlays text, border or an interactive color token set outline property to true to ensure the proper color contrast is maintained.