Badge

ECT approvedCarbon alignedUpdated May 21, 2026

Description

A badge is a small numerical indicator positioned next to interactive elements.
It shows when something needs action or review.
Typically used for notifications within navigation, and to show that filters have been applied.

Figma library.

Component preview

Information

Loading Carbon component...

CounterSizeVariantChildrenInverse

Open in Storybook

Anatomy

Anatomy

Size

Large

Medium

Small (no content)

Variations

Typical

Subtle

No border

Position

Use a badge overlapping, inside, or close to, another component.

On buttons

In global navigation

In products menus

In tabs

Content

Limit content to four characters, includeing a "+"

Color mode

Light

Dark

Warning

Inverse-styled badges Inverse-styled badge components are available in Figma. They are designed for light mode scenarios where a specific element (like a button or pill inside a selected table cell) needs a dark mode appearance. They are not a substitute for dark mode. For full dark-themed interfaces, always use the actual dark mode instead of applying inverse-styled components.

Dos and don'ts

Technical example

Badge component implemented in Carbon.

Requirements

Users should be able to:

Understand the purpose of information contained in badges through appropriate labels.
Receive information about dynamic changes to badge content as they happen.
Navigate to an interactive element with a badge and receive contextual information about the badge's purpose.

Interactions

Badges are most commonly used to display information within other components, such as buttons, navigation elements, and tabs. Badge elements themselves are non-interactive.
Where a badge is used to show an unread notification, the badge should be removed when the corresponding notification is cleared.

Design considerations

The color of a badge must meet a minimum contrast ratio of 3:1 against the background.
The text within a badge component must meet a minimum contrast ratio of 4.5:1.
The red and blue variations of the badge component are for aesthetic purposes only. They should not be used to convey any meaning.

Development considerations

Use aria-live regions to announce new notifications to screen reader users.
Set the attribute to aria-live=”polite” so badge content is announced only when the user is idle.
Use aria-describedby to relate the badge to the button.

Date	Changes
August 2025	Updated guidance on the accessibility tab.
July 2025	Updated variant names to Large, Medium, and Small.Updated color variants to typical (red) and subtle (blue).
May 2025	Added a callout highlighting the availability of inverse-styled badge components in Figma, intended for light mode scenarios.
February 2024	Added alternate color in Variations .Updated badge on button and badge in tab examples to show the blue badge.Added Do use a suitable color variant.
September 2024	New version created. Previous versions archived in the Product design system.