Skip to content

Badges & Pills

Visual indicators for status, counts, and labels. All badges meet WCAG 2.1 Level AA contrast requirements.

Badge Variants

DefaultPrimarySuccessWarningErrorInfo

Outline Badges

DefaultPrimarySuccessWarningErrorInfo

Badge Sizes

SmallMediumLarge

Pill Badges

Pill BadgeActivePendingInactive

Badges with Icons

Completed In Progress Failed

Dot Badges

OnlineAwayBusyOffline

Counter Badges

Notifications5
Messages12
Updates99+

Accessibility Guidelines

Color ContrastAll badge text meets 4.5:1 contrast ratio minimum.
Not Color-OnlyStatus is conveyed through text, not just color.
Screen Reader SupportCounter badges announce their values to assistive technology.