components icon

Badge

A badge is a visual label used to indicate status or highlight featured content.

Status

PublishedElement can be used in production
React
React
In backlogElement is in backlog
Adobe XD
Adobe XD Kit
In backlogElement is in backlog
Web Components
In backlogElement is in backlog
Angular
Angular
In backlogElement is in backlog
PublishedElement can be used in production
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

Alt: The parts of a badge, labeled 1 through 3.

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.