Badges

UI elements that relate the status or numerical count of a related object.

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
↑ Back to top