Badge
Highlight status, count, or label information.
Examples
Free, accessible React badge components built with Base UI for status indicators, labels, and notification counts with multiple variants.
Base
Pill
Rounded pill badges for a subtleer appearance.
Dot
Indicator dots for status signals.
Dot Pill
Pill-shaped dots for a subtleer status indicator.
Icon
Badges with icons.
Icon Pill
Pill badges with icons for a subtleer look.
Icon Right
Icons positioned after the label.
Icon Right Pill
Pill badges with icons on the right side.
Icon Dot
Status icons with labels.
Icon Dot Pill
Pill badges with status icons on the right.
Icon Right Dot
Icon plus label on the right for call-to-action badges.
Icon Right Dot Pill
Pill badges with icons on the right.
Close
Badges that can be dismissed with a close button.
Close Pill
Pill badges with dismiss functionality.
Count
Notification counts attached to labels.
Count Pill
Pill badges with notification counts.