Badge
Badges are small circles, positioned either at top-right or bottom-right of the parent component. Badge can be used to display numbers, online / offline status, depending on where they are used.
Status badges on avatar
Use
status-available, status-away, status-dnd, status-offline
with badge-status to
circular badge on avatars
Avatar with status available badge
Avatar with status offline badge
Avatar with status do not disturb badge
Avatar with status away badge
Button with badge
10