Badge
A small label component for highlighting status, categories, and metadata.
Examples
Badge Variants
Available badge colors: Primary, Secondary, Success, Warning, Danger, and Info
PrimarySecondarySuccessWarningDangerInfo
Badge Sizes
Available sizes: Small, Medium, and Large
SmallMediumLarge
Usage Examples
Common use cases: status indicators, categories, counts, and priority levels
Status Indicators
ActivePendingInactiveDraft
Categories
TechnologyDesignBusinessMarketing
Counts and Metrics
Notifications12New Messages3Tasks7
Priority Levels
High PriorityCritical task requires immediate attention
Medium PriorityImportant but not urgent
Low PriorityCan be addressed later
Badges with Icons
Combining badges with icon components
NewTrending5 Messages