A badge is a visual indicator that notifies users of numeric values.
Badges stand out from the surrounding UI to highlight important information.
Badges are just loud enough—easily noticed but not distracting.
A badge tracks notifications globally across the experience.
Labels are required to indicate the number of notifications available.
There are 3 sizes available to fit values in the ones, tens, and hundreds values.
Badges are placed in the top-right quadrant of an icon button to avoid obscuring the icon within the button.
When used with text labels, badges are placed to the right and vertically aligned to the text cap height.
The maximum number shown is 99. When there are more than 99 notifications, a “+” will be appended to the label.
Do place badges in the top-right of icon buttons or inline to the right of a text label.
Don’t customize the placement of badges.
Do adhere to our maximum values.
Don’t customize the badge to allow for numbers larger than 99.
