Badges

Badges show notifications, counts, or status information on navigation items and icons. They can hold a label or a number. Two variants: small (an empty <span class="badge">, a 6dp dot) and large (text inside, a 16dp stadium). Nest the badge in the icon so it anchors at the upper trailing edge of the 24dp glyph. Limit content to four characters, including +.

The default mapping is error / on-error. Pair a fill utility with its on-* text class only if you override it.

<span class="material-symbols" role="img" aria-label="Mail, unread">mail<span class="badge"></span></span>
<span class="material-symbols" role="img" aria-label="Mail, 1 unread">mail<span class="badge">1</span></span>
<span class="material-symbols" role="img" aria-label="Mail, 999+ unread">mail<span class="badge">999+</span></span>

Small

Leave the badge empty. It is a 6dp circle with no label — an unread mark, not a count.

notifications

<span class="material-symbols" role="img" aria-label="Notifications, unread">notifications<span class="badge"></span></span>

Large

Put a number or short label in the badge. Height is 16dp, corners are a stadium, inset is 4dp. Cap the string at four characters; use 999+ when the count is larger.

mail1 mail999+

<span class="material-symbols" role="img" aria-label="Mail, 1 unread">mail<span class="badge">1</span></span>
<span class="material-symbols" role="img" aria-label="Mail, 999+ unread">mail<span class="badge">999+</span></span>

On navigation

A destination can nest the badge in the icon, or keep it as a sibling after the label — the bar and rail position that sibling on the icon’s upper trailing corner. Tabs nest it in the icon.

<a href="#!" aria-label="Inbox, 3 unread">
  <span class="material-symbols" aria-hidden="true">inbox<span class="badge">3</span></span>
  Inbox
</a>

In a list

A trailing .badge in a list or drawer row stays in flow on the end, as a count, not overlapped on the leading icon.

• inbox Inbox 3
• send Sent

<ul class="list">
  <li>
    <span class="material-symbols" aria-hidden="true">inbox</span>
    Inbox
    <span class="badge">3</span>
  </li>
</ul>

In a navigation drawer

Put a badge on a summary or a destination. Nested sections are native <details>.

<summary>
  <span class="material-symbols" aria-hidden="true">inbox</span>
  Inbox
  <span class="badge">4</span>
</summary>

Color

Default is error / on-error. Override with a fill + on-* pair when the badge is not an error/notification.

mail3 star1

<span class="badge">3</span>
<span class="badge primary on-primary-text">1</span>