Badge Component Demo
Color Variants
neutral default primary secondary success info warning danger ghost
Sizes
Small Medium Large
Rounded vs Square
Rounded Square
Dismissible Badges
Click X to dismiss Not dismissible
Custom Content (Slot)
Verified Alert
Long Text Truncation
This is a very long badge text that should truncate with ellipsis
All Combinations
default-sm X
default-md X
default-lg X
primary-sm X
primary-md X
primary-lg X
success-sm X
success-md X
success-lg X
warning-sm X
warning-md X
warning-lg X
danger-sm X
danger-md X
danger-lg X
info-sm X
info-md X
info-lg X