Badge
UI elements that relate the status or numerical count of a related object.
Page sections
Types
Numeric badge
Status badge
Usage
Numeric badge
Display numeric badge when there is one or more new items
Do not use the numeric badge if there are no new items
Status badge
Use the status badge to note when something has been applied, such as a filter
Behavior
Numeric badge
Numeric badge values above 9 should be “9+”
Avoid numeric badges that have more than one numeral
Visual style
Numeric badge
When used on an icon for notifications, display numeric badges at the top right of the icon
When used inline, include at least 8px spacing around the numeric badge
Status badge
Include at least 4px spacing around the status badge