Badge
Badges are used to indicate unchecked notifications, item counts, or other important numeric information relating to the item it's next to.
Color
| Element | Property | Color token |
|---|---|---|
| 1. Container | Background | $color-status-branded |
| 2. Label | Text | $color-text-on-branded |
Structure
Size
Typography
| Element | Size & weight | Type token |
|---|---|---|
| Label text | 14px, Bold | $typography-body-2 |