Badge

Badges are used to display a short but meaningful information with some other element like a avatar or icon.

Different Sizes of Badge

One of the type of badge that is most commonly used is with avatar, An avatar with badge is usually shown in chat section or comment section that signifies whether a user's status. To use Badge with avatar wrap the avatar in a class of avatar__with__badge and add a span with the badge class.(eg. class="avatar__default avatar__with__badge__active")

Different types of Badges

Badge on Icons

A Badge with icons is used to show some information along with icons like notification count.