Badges are small circles, positioned either at top-right | top-left | bottom-right | bottom-left of the parent component. Badge can be used to display numbers, online / offline status, depending on where they are used.

• In order to view the code you need to visit using a device with larger screen.

Badge on a Avatar is used to show the current status of a user.
It can be used with 3 variants: Online | Offline | DND

Badge on Icon is used to show the number of items present in the parent component.