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
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.