UI elements / Badges

Basic Badges
Default
Primary Secondary Success Danger Warning Info Dark
Pills
Primary Secondary Success Danger Warning Info Dark
Label Badges
Label Default
Primary Secondary Success Danger Warning Info Dark
Label Pills
Primary Secondary Success Danger Warning Info Dark
Button with Badges
Default
Label
Outline
Badge Circle & Square Style
Basic
Default

1 2 3 4 5 6

1 2 3 4 5 6

Label
Default

1 2 3 4 5 6

1 2 3 4 5 6

Badge Circle & Square With Icon
Basic
Default

Label
Default

Dots Style
Primary
Secondary
Success
Danger
Warning
Info
Button with Badges Notification
Notifications With Icons
Small badge notifications.
6
5
4
Badges Position
Position using utility classes like top-*, start-*, etc...
Avatar 4
Avatar 4
Avatar 4
Avatar 4
Badge Overlaps for Shapes
Using rounded-* utilities for avatar & .badge-dot class for notification
Avatar
Avatar
Avatar
Avatar
Avatar
Avatar 9
Maximum Values
Avatar 99
Avatar 99+
Avatar 999+
Custom label Badges
Avatar 4
Avatar 4
pi 4
Avatar 4
Avatar 4
pi 4
Avatar 4