Badge
Badge is an element for the use of drawing attention to additional interface information with eye-catching appeal, typically displaying unread messages count.
Basic Buttons
html
<div>
<div>
<div class="bg-primary-500 badge text-white">primary</div>
</div>
</div>
TIP
You can use class for badge type. Available types: class="bg-primary-500 text-white", class="bg-secondary-500 text-white", class="bg-success-500 text-white", class="bg-info-500 text-white", class="bg-danger-500 text-white", class="bg-warning-500 text-white",
Pill Badges
Just add an extra class pill to make a pill badge.
Soft Badges
Just add an extra class bg-opacity-[0.12] to make a soft badge.