6900
Orders
9800
Sales
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
Advanced Badge Use Cases
Examples of badges in real-world application scenarios.
User Status Indicators
David Brown
Online
Michael Johnson
Away
Emily Davis
OfflineProduct Status Badges
MacBook Pro M2
iPhone 14 Pro
AirPods Max
Task Status Indicators
Database Migration
Due in 2 days
UI Design
Due today
API Integration
Overdue by 1 day
Creative Badge Styles
Unique and eye-catching badge designs.
Outline Badges with Shadow
Primary
Success
Danger
Info
Warning
Combined Style Badges
Featured
Verified
Alert
New
Premium