Badge
A badge is a visual indicator that notifies users of numeric values.
Noticeable
Badges stand out from the surrounding UI to highlight important information.
Minimal
Badges are just loud enough—easily noticed but not distracting.
Global
A badge tracks notifications globally across the experience.
- Label
- Container
Labels
Required. The label shows a count related to the badged element, such as unread messages or pending notifications. For number formatting, see Formatting numerals.
- Use numerals, not spelled-out words
- Show “99+” for counts above 99
- No ending punctuation
Size
There are 3 sizes available to fit values in the ones, tens, and hundreds values. The values of ones and tens are both in a circle.
Icon buttons
Badges are placed in the top-right quadrant of an icon button to avoid obscuring the icon within the button.
Inline
When used with text labels, badges are placed to the right and vertically aligned to the text cap height.
Maximum
The maximum number shown is 99. When there are more than 99 notifications, a “+” will be appended to the label. There is also a “dot only” version which is smaller and does not hold text.
iOS
Badges on iOS are shown without a stroke. Badges remain the same size and layout across platforms and screen sizes.
Small
Badges remain the same size and layout across platforms and screen sizes.
Large
Badges remain the same size and layout across platforms and screen sizes.
Placement
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.
Maximum
Do adhere to our maximum values.
Don’t customize the badge to allow for numbers larger than 99.
