Badges are used to display numerical information in a small area space. They are also used for notifications but note that badges can be nofications but notifications are not badges.
States of badges
There are four states of badges:
Passive: this doesn’t require a users’ full attention.
Warning: requires a users attention, and that they should know there is a warning to the following outcome or interaction.
Alert: somewhat requires a users attention, this badge means that the user can continue what they are doing but they should recognise the risks.
Notification: optional in regards to grabbing the users’ attention, this badge informs the user about something non-urgent.
Size: H 24px, W 32px
Size: H 24px, W 48px
Badges are used to display numerical information in a small area space.
They can be used for notifications but note that notifications are not badges.
When to use
Displaying information in a confined space to represent something in a numerical value.
And example of this is Codebots platform on the entity diagram, there is a section that shows number of users on the appliction plus 3 more - that’s a badge the