Badges

Badges are small circles, positioned either at the top-right or bottom-right of the parent component. They can be used to display notifications, updates, and users' status depending on where they are used.

The badges are in gold by default. However, they come in 3 additional colors:
  • grey-badge
  • red-badge
  • green-badge

Badges on Icons

These are badges used on icons - typically used to display the number of notifications or updates. Add the class badge-icon-container in the parent container and badge in the badge element. You may additionally use the class badge-text in case the text is required within the badge.

Here are some examples:
shopping_cart
whatsapp
mail
4
message 

<!-- add the class "badge-icon-container" in the parent container 
and "badge" in the badge element 
use "badge-text" for badges with text -->

<div class="badge-icon-container">
    <span class="material-icons md-36 material-icons-outlined">
        mail
    </span>
    <div class="badge badge-text red-badge">badge text</div>
</div>

Badges on Avatars

Badges on avatars indicate the online status of the user: offline, online, idle or busy.

Use the classes as mentioned below:
In the parent container, use the class avatar-badge-container.
In the avatar element, add the class avatar along with the preferred size: avatar-sm, avatar-md or avatar-lg.
For the badge on avatar, along with the classbadge, use av-badge.
There are 3 badge sizes you can opt out of - av-sm-badge, av-md-badge, av-lg-badge. Please ensure these are corresponding to the avatar size used for best results.
small avatar
small avatar
small avatar
small avatar 

<!-- add the class "avatar-badge-container" in the parent container 
add classes "badge" and "av-badge" in the badge element with the
preferred color and size-->

<div class="avatar-badge-container">
    <img src="/assets/dp.jpg" alt="small avatar" class="avatar avatar-lg">
    <div class="badge av-badge av-lg-badge red-badge"></div>
</div>
< Avatars Buttons >