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.
Property | Value(s) |
---|---|
Height | 20 px |
Max width | 160 px |
Corner radius | 4 px |
Padding (top, right, bottom, left) | 2 px, 4 px, 2 px, 4 px |
Property | Value(s) | Default value |
---|---|---|
Appearance | Stone | |
Subtle | False |
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.