Badge

Badges are usually seen in social media apps to indicate the status of whether a person is online or offline. They are also used to indicate number of unread notifications.

Badge on icon

Badge on icon can be used to show number of notifications, unread messages and so on. It usually has a icon with a number representing count on that notification. The position of badge can be changed using the classes .badge-top-right to position it top right of the icon and .badge-top-left to position it top left of the icon.

5
8
9+
2 

<div class="badge badge-wrapper">
  <div class="far fa-envelope"></div>
  <div class="badge-counter badge-top-right badge-clr-blue badge-round">5</div>
</div>
<div class="badge badge-wrapper">
  <div class="far fa-bell"></div>
  <div class="badge-counter badge-top-left badge-clr-red badge-round">8</div>
</div>
<div class="badge badge-wrapper">
  <div class="far fa-heart"></div>
  <div class="badge-counter badge-top-right badge-clr-green badge-round">9+</div>
</div>
<div class="badge badge-wrapper">
  <div class="fas fa-shopping-cart"></div>
  <div class="badge-counter badge-top-left badge-clr-orange badge-round">2</div>
</div>

Badge on avatar

Badges on avatars can be used to indicate the status of the person — whether he / she is online. They can be as simple as a small dot or a circle with border around the image

avatar 1
avatar 1
avatar 1
avatar 4
avatar 4
avatar 4 

<!-- Add URL in src -->

<!-- badges with dot -->
<div class="badge">
  <div class="avatar avatar-border">
    <img src="" class="avatar-round avatar-sm">
  </div>
  <div class="badge-white-container">
    <div class="badge-dot-green"></div>
  </div>
</div>
<div class="badge">
  <div class="avatar avatar-border">
    <img src="" class="avatar-round avatar-sm">
  </div>
  <div class="badge-white-container">
    <div class="badge-dot-orange"></div>
  </div>
</div>
<div class="badge">
  <div class="avatar avatar-border">
    <img src="" class="avatar-round avatar-sm">
  </div>
  <div class="badge-white-container">
    <div class="badge-dot-red"></div>
  </div>
</div>

<!-- badges with a colored border -->

<div class="badge badge-red">
  <div class="avatar">
    <img src="" class="avatar-round avatar-sm">
  </div>
</div>
<div class="badge badge-green">
  <div class="avatar">
    <img src="" class="avatar-round avatar-sm">
  </div>
</div>
<div class="badge badge-orange">
  <div class="avatar">
    <img src="" class="avatar-round avatar-sm">
  </div>
</div>
 Avatar
Button