Skip to content
On this page

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.

COPYRIGHT © 2022 Codeshaper, All rights reserved.