Badges are used to tag entities with concise and relevant information.
Badges contain short labels that help in ‘tagging’ entities. The container of a badge is rounded at the corners.
Solid badges are used to highlight important information on the page so that they can be recognized easily. They use solid color to easily pop out in a page.
Subtle badges are used when a lot of entities on a single page need tagging/labeling. In that case, using solid badges becomes a bit overwhelming e.g. tags in a list. This is why subtle badges use the lightest shade of the colors.
A badge comes in 9 appearances.
(top, right, bottom, left)
|2px, 4px, 2px, 4px||-|
Badges should maintain a minimum spacing of 8px from the content on either side.
Badges are used for tagging entities while pills are used to display count of entities.