Badge

A badge is a visual label or indicator used to convey status or highlight content.

Status

PublishedElement can be used in production
PublishedElement can be used in production
Angular
Angular
PublishedElement can be used in production
React
React
In backlogElement is in backlog
Documentation
PublishedElement can be used in production

What's new

Badge is a new, standalone component. In v1, badges were grouped with the notifications component. The size range has been expanded to include dots and microdots. In addition to an updated font ramp, badge now incorporates semantic colors, icons, and various emphases.

When to use

Badges and tags are visually similar, but tags are interactive and badges are not.

ComponentUse case
BadgeThe badge component indicates a status or count. Badges are read-only status indicators or labels and are not interactive.
TagUse tags to allow users to group, sort, or filter information. Tags frequently contain keywords or metadata. They provide quick access to specific categories and support content classification and navigation.

Anatomy

Large and medium badges can contain up to three elements:

  1. Badge container: primary element, color-coded.
  2. Icon: optional semantic icon.
  3. Label: short descriptive text describing the badge.

Articles

Indicators, validations, and notifications

Read the Nielsen Norman Group's article on badge.

Visual indicators in a list

Read the Nielsen Norman Group's article on badge.