Badge
Badges are small status descriptors for UI elements. A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.
The badge component has 2 positions each having sizes lg(large) and
sm(small) and three colors as follows:
pos-right-top-lg
pos-left-top-lg
pos-right-top-sm
pos-left-top-sm
Badge with Text
Text with a large badge
1
Text with a small badge
1
Text with large badge
9+
Badge with Button
Button with a large badge on the left
Button toggles badge visibility
Badge with Icon
Icon with a badge
15+
Note: Used 10px as root font size.