Components

Badge

Overview

Overview

When to use

Badges can be used to communicate status or count. Badges are read-only status indicators or labels and are not interactive.

• Draw attention to new or unread notifications, such as messages or alerts.
• Indicate the status of an item or task, such as "In progress" or "Complete".
• Display the number of items in a particular category or section.

When not to use

Don't use badges excessively, as this can overwhelm the user and make the interface look cluttered. Don't use badges to draw attention to information that is not particularly important or relevant to the user.

Variants

Text badge

Text badges are used to communicate status or count.

Icons can be used in large and medium badges.

Dot badge

Dot badges are used adjacent to text or on top of an icon to indicate status.

Size

Text badges come in four different sizes: large, medium, small and x-small.

Dot badges are available in two sizes: large and small. Recommended usage: large when adjacent to text, small when on top of an icon.

Labels

Label can be either a number or text. Keep text labels as short as possible, preferably one word only.

Semantic vs non-semantic

Badges can be used to indicate semantic meaning.

Colors can be also used as a decoration, without any semantic meaning. Use of yellow and red color is not recommended in this case, as users may perceive it as a warning or an error.

Usage

Usage guidelines

Labels

Keep text labels as short as possible, preferably one word only.

Do

Don't

Amount of badges

Excessive badge use can lead to visual clutter and confusion. Use badges sparingly to emphasize key information and to only highlight critical elements or statuses.

Do

Don't

Colors

When indicating status, use colors that align with the intended meaning, such as green for positive or red for negative status.

Do

Don't

Size

The badge will automatically size itself to fit the content. Do not change the width of the badge.

Do

Don't

Icons

Do not use icons without a label.

Do

Don't

Accessibility

Keyboard

A badge is static text in a span. It is not focusable and has no keyboard behaviour. If a badge sits inside a button or link, that control provides the interaction.

Screen readers

By default the badge's visible text is read inline with the content around it. A badge inside a button or link becomes part of that control's name ("Messages 3").

• With ariaLabel, the visible text is hidden from screen readers (aria-hidden="true") and the label is rendered as visually hidden text instead. For example "3" is read as "3 unread messages".
• A badge with neither text nor ariaLabel, such as a dot, is treated as decorative and gets aria-hidden="true". isHidden does the same for a badge with text.
• With live, the badge gets role="status", so changes to its content are announced politely.

Icons inside a badge are aria-hidden="true".

Using the example

• Colour must not be the only way the badge carries meaning (WCAG 1.4.1). A red dot next to "Messages" means nothing to a screen reader or colour-blind user; add text or an ariaLabel.
• Use ariaLabel to add context to a bare number, not to replace the visible text with something different.
• Use live only for badges that actually change while the page is open, such as a cart count. A page full of role="status" badges makes announcements noisy.
• A badge in the initial page markup is not announced even with live; only later changes are.