Badge

Source Edit this page

Badges shows status or unread notifications.

Badge

A basic badge is a rounded dot. It can be used as status indicator.

<span class="badge"></span>
<span class="badge badge-primary"></span>
<span class="badge badge-danger"></span>
<span class="badge badge-warning"></span>
<span class="badge badge-success"></span>

Adding badges

A badge can be added to any element. Add badge__parent to parent element and badge__child to its corresponding child element.

profile 
<button class="btn btn-icon" aria-label="bell icon">
	<span class="icon title badge-parent">
		<i class="ri-notification-line"></i>
	<span class="badge badge-danger badge__child top-0 right-0"></span>
	</span>
</button>

<button class="btn btn-icon" aria-label="battery icon">
	<span class="icon title badge-parent">
		<i class="ri-battery-fill"></i>
	<span class="badge badge-success badge__child top-0 right-0 min-width-0.5 min-height-0.5"></span>
	</span>
</button>

<div class="badge-parent">
	<img class="avatar avatar-lg rounded-sm" src="/images/profile.png" alt="profile"/>
	<span class="badge badge-primary badge__child bd-white border-2 -bottom-1 -right-1"></span>
</div>

Badge Text

Use badge text to show any counters. Add badge-text to the badge.

<button class="btn btn-icon" aria-label="bell icon">
	<span class="icon title badge-parent">
		<i class="ri-notification-line"></i>
	<span class="badge badge-text badge-danger badge__child -top-1 -right-1">4</span>
	</span>
</button>

<button class="btn btn-icon" aria-label="chat icon">
	<span class="icon title badge-parent">
		<i class="ri-message-2-line"></i>
	<span class="badge badge-text badge-primary badge__child -top-1 -right-2">12+</span>
	</span>
</button>

Variations

With the help of utilities different variations of a badge can be created.

Border

Adjust border width and color with border utilities.

<button class="btn btn-icon" aria-label="bell icon">
	<span class="icon title badge-parent">
		<i class="ri-notification-fill"></i>
	<span class="badge badge-text badge-neutral badge__child bd-white border-2 -top-2 -right-3">4+</span>
	</span>
</button>