English Espanol Japanese
Notifications
Critical alert: Server crash detected
Just now
Emiliya mentioned in you a comment
1h
Backup completed successfully
2h
Profile updated successfully
3h
Nikita sent you a friend request
Accept
2d
API updated
3d
View All
Theme
Sidebar

Badge

  1. Home
  3. Components
  5. Badge
Default
Default 

<span class="badge bg-stone-400/20 text-muted">Default</span>
Custom color class
Primary 

<span class="badge bg-primary/10 text-primary">Primary</span>
Color variant
Active Pending Declined In progress 

<span class="badge bg-green-500/10 text-green-500">Active</span>
<span class="badge bg-yellow-500/10 text-yellow-500">Pending</span>
<span class="badge bg-red-500/10 text-red-500">Declined</span>
<span class="badge bg-sky-500/10 text-sky-500">In progress</span>
In button

<button type="button" class="btn btn-default">
    <span class="icon-[lucide--bell] text-lg me-2"></span>
    Notifications
    <span class="badge bg-red-500/10 text-red-500 ms-2">99+</span>
</button>
Custom position

<button type="button" class="btn btn-default relative">
    <span class="icon-[lucide--bell] text-lg me-2"></span>
    Notifications
    <span class="badge !p-0 size-8 !rounded-full flex items-center justify-center border-4 border-white dark:border-stone-900 bg-red-500 text-white absolute left-full top-0 -translate-x-1/2 -translate-y-1/2">
        9+
    </span>
</button>