Badge

Badges are used to display the notification count or status information. It may be positioned top-right or bottom-right of the icon / avatar. We can use badges on icons, buttons and texts as well.

Badge on Icons

Let us see the example of badge on icon. You need to include class badge and for the required size, add class name according to the size and place / position you want to use the badge. For eg. badge-lg for large sized badge, badge-sm for small sized badge, and badge-icon for the badge on icon as shown below.

Badge on Avatars

You can use badges on avatars as well. Let us see the example of badge on avatar. You need to include class avatar for the avatar image, class badge-status for the badge, and then add the below class names according to the status of the avatar. For eg. badge-online for person online, badge-busy for the person busy, badge-dnd for the person on do not disturb mode, and badge-idle for the person idle.