Badge
Display
Displays a badge or a component that looks like a badge. Perfect for status indicators, labels, and counts.
Variants
Different badge styles for various contexts and meanings.
Default
Secondary
Destructive
Success
Warning
Outline
Status Indicators
Use badges to communicate status clearly.
Completed
Pending
Failed
Info
With Buttons
Combine badges with buttons for notification indicators.
In Cards
Badges work great in card headers for categorization.
Premium Feature
Pro
This feature is available to pro users.
New Release
v2.0
Latest version with new features.
Custom Sizes
Adjust badge sizes using className for different contexts.
Tiny
Default
Large