Badge is used to tag entities with concise and relevant information.
Badge contains short labels that help in ‘tagging’ entities. The container of a badge is rounded at the corners.
A badge comes in 9 appearances and 2 styles each.
Solid style is used to highlight important information on the page so that they can be recognized easily. Solid style helps the badge to easily pop out in a page.
Subtle style is 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.
|Max width||160 px|
|Corner radius||4 px|
(top, right, bottom, left)
|2 px, 4 px, 2 px, 4 px|
Badges should maintain a minimum spacing of 8px from the content on either side.Spacing between badges
Badges are used for tagging entities while pills are used to display count of entities.