Elements
Badges
Status pills and tags for inline labels, statuses, and counters.
Looking for every Badge prop? See Components › Buttons.
Small
Compact badges for dense layouts.
Open
Default
Standard badge sizes across all variants.
Open
Large
Larger badges suitable for headings and stats.
Open
With dot
Status badges with a leading colored dot.
Open
With icon
Badges with leading lucide icons.
Open
With button
Removable tag badges with a close button.
Open
With border
Outline badges in semantic colors.
Open
With border and icon
Outline status badges with an icon.
Open
Pill
Soft-tinted pill badges.
Open
Pill with dot
Pill badges with a status dot.
Open
Pill with icon
Pill badges with a leading icon.
Open
Pill with border
Pills with a tinted ring border.
Open
Status success
Success-state badge styles.
Open
Status warning
Warning-state badge styles.
Open
Status error
Error-state badge styles.
Open
Status info
Informational badge styles.
Open