Basic Badges
Use the .badge class with contextual classes to create badges.
Primary
Secondary
Success
Danger
Warning
Info
Dark
Subtle Badges
Primary
Secondary
Success
Danger
Warning
Info
Dark
Pill Badges
Use the .rounded-pill class for rounded pill badges.
Primary
Secondary
Success
Danger
Warning
Info
Dark
Subtle Pill Badges
Primary
Secondary
Success
Danger
Warning
Info
Dark
Badges with Icons
Combine badges with icons for more visual appeal.
Users
Completed
Rejected
Pending
Info
Pill Badges with Icons
Users
Completed
Rejected
Pending
Info
Trendy Badge Styles
Modern badge styles with gradients and shadows.
Border Badges
Primary
Success
Danger
Warning
Info
Interactive Badges
Badge Positions
Position badges on different elements.
Counter Badges
Contextual Badges
Badges showing status and contextual information.
2.5% Growth
1.8% Decline
In Progress
Needs Attention
Today
System Status Badges
System Online
Maintenance Mode
Critical Error
Updating
Standby Mode
Badge Sizes
Badges with different size variations.
Small Badges
Large
Default
Small
Smaller
Tiny
Custom Sized Pill Badges
Large Pill
Normal Pill
Small Pill
Tiny Pill