Basic Badges
Use class.badge with contextual classes
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Badges in Buttons
Add badges to buttons for counters or notificationsPositioned Badges
Position badges on buttons or other elements
5
notifications
New
Badges with Icons
Add icons to make badges more meaningful
125 Users
Completed
Failed
Warning
Info
Settings
Pill Badges
Use.rounded-pill for rounded badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Link Badges
Use badges as links with hover effectsBadge Sizes
Different badge sizes using font-size utilities
Extra Small
Small
Normal
Large
Extra Large
Status Badges
Common status indicators
User Status:
Online
Payment Status:
Pending
Order Status:
Processing
Project Status:
In Progress
Task Status:
Completed
Issue Status:
Critical
Dismissible Badges
Badges with close buttons
JavaScript
React
Bootstrap
HTML5
CSS3
Counter Badges
Numeric counters and statistics
1,432
Users
856
Orders
$24,560
Revenue
Badge Lists
Badges in list groups
Inbox
14
Sent
7
Drafts
2
Spam
99+
Trash
3
Custom Badge Styles
Creative badge variations
Gradient Blue
Gradient Green
Gradient Red
Outlined Primary Outlined Success Outlined Danger
Outlined Primary Outlined Success Outlined Danger