Badge
A badge contains a numeric value to indicate a running tally
Anatomy
A) Container B) Label
Spacing
Badges placed next to each other in a sequence should be spaced 8px apart.
Positioning
Badges are should be placed close to the object they're quantifying, for instance, the number of objects in a folder or the summary of each data point in a chart.
Variations
Notification badge
Notification badges alert users to cumulative related actionable items, such as unread messages. When the user performs an action related to the badge, the count should reduce accordingly.
Best practice
Badges vs. Lozenges
Badges show counts using numerical figures only, with the exception of mathmatical symbols such as “+” , ”-“ and ”%” and number abbreviations such as “k” and “m”. For more guidance see \[number formats] \[Lozenges] highlight an item's attributes or status and can use alphanumeric characters.
Maximum value and length
For large numbers, consider setting a maximum value and maximum number of displayed digits. For more guidance see \[number formats]
