Overview
A Badge is a visual text label that displays the numeric values of an object.
Usage
Badges show the count of some adjacent data. They are usually placed after the label of the thing they're quantifying.
Use a badge only for numerical counts.
Use for counts of important information close to the relevant item.
Use to notify or draw attention to changed values.
Anatomy
Label text: Display the numerical counts.
Container: Hold the label counts and use color to categorize the information.
Variant & Props
Semantic Variants: When badges have a semantic meaning, they use semantic colors.
Accessibility
Use an icon with these elements if color use conveys information such as error message, warning, or success message that the text doesn't convey. The icon is required so we do not use color as the sole means of conveying information.
Icon should have appropriate alt text to convey semantic meaning.