Badges
Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread message count.
Status Badge
Status badges are used with avatars and we have three types of status badges named online, offline, and do not disturb. Enclose avatar with div with class badge-container. The common class for the status badges is status-badge and classes like online-badge, offline-badge, dnd-badge can be used to show different statuses.
Icon Badges
Icon badges are usually anchor links with icon inside it. You can use a number-badge class to get a notification number badge.