Badge

Badge can be used to show either status of the user (online, or offline) or you can use it show notification count.

Badge on Icons

                    
<button class="badge-btn">
  <i class="fas fa-home"></i>
  <span class="badge-count bg-amber-500">9</span>
</button>

<button class="badge-btn">
  <i class="fas fa-shopping-cart"></i>
  <span class="badge-count bg-lime-500">9+</span>
</button>

<button class="badge-btn">
  <i class="fas fa-bell"></i>
  <span class="badge-count bg-red-500"> 99+ </span>
</button>

Badge on Avatars

                    
<div class="badge">
  <img loading="lazy" class="avatar" src="..." alt="..." />        
  <span class="badge-status bg-lime-500"></span>
</div>

<div class="badge">
  <img loading="lazy" class="avatar" src="..." alt="..." />        
  <span class="badge-status bg-red-500"></span>
</div>

<div class="badge">
  <img loading="lazy" class="avatar" src="..." alt="..." />
  <span class="badge-status bg-slate-400"></span>
</div>