Badge

Badges are small status descriptors typically circular in shape. They can be used on UI elements like avatar, icons and text. Use the .badge class to create a badge.

Avatar badges are used to indicate user status like online, offline or away.

To add a badge on an icon, wrap the icon with .icon-badge and then add a sibling element with .badge class. You can add different colors to the badges with a color class like .green.

Note: To maintain the circular shape, badges on icons must contain a maximum of 3 characters.

You can also add badge on text, With the same classes used in icon with badges.

Alter the size of a badge with .lg class.