A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.

Badge on Avatars

To add badge on avatar, you need only place the below line of code in the avatar component before the close div. The "pos-"class is for positioning of the badge, one can use "r","l","t","b" for right, left, top and bottom respectively.

<p class="badge-text badge-text-l pos-r pos-t">5</p>

5

5

Badge on Icons

For badge on icons we can use the class "icon-badge".

<div class="icon-badge">
  <img src="/CSS/Components/assets/email.png">
  <p class="badge-text badge-text-m pos-r pos-t">5</p>
  </div>

5

5