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

mail

message





    
        mail
    
    badge text

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.

< Avatars Buttons >