Badge
Badges are used alongside components like text, avatar and icons to display status of user or notification numbers.
Avatar with a badge
Badge is used on an avatar to display the status of the user. The badge class is used on the main figure class alongside the avatar class.
You can use the avatar-badge class alongside the status badge classes namely online, busy, away, and offline to get badges with respective status.
Icons with a badge
Icons also can contain badges above them to display number of items, or number of notifications.
Use the badge class on the parent div tag. You can use the icon-badge class on your icons to make badges on an icon.