Badge

Badges are used to indicate the number of notifications pending for a particular function, such as unread email, voicemail, text, and chat messages.

• Interactive Playground
• Anatomy
• Usage
• Related Content

The Interactive Playground allows you to experiment with various badge styles and features. Once you get the results you want, copy the HTML or React code provided and paste it into your application.

<div>
  <span
    class="neo-badge"
    data-badge="27"
    aria-label="badge with 27 items"
  >
    <span class="neo-icon-customer" aria-label="customer icon" />
  </span>
</div>

<Badge
  aria-label="badge with 27 items"
  data="27"
>
  <Icon icon="customer" aria-label="customer icon" />
</Badge>

Badges include the two components shown below. The number of the count can vary.

• Container:

  The container is left-justified (expands to the right) to hold all the digits in the number count.

• Number Count:

  There is no limit to size of this value. The text is center-justified within the container.

Badges are only used to display the number of outstanding notifications for a function. For example, how many unread email messages a user has waiting, or the number of system alerts they have not yet viewed.

DO: Use badges for counters, such as notfications.

DON'T: Do not use badges for other numerical indicators, such as dates or prices.

DO: Where there is limited space, truncate the counter by using +, or shorten thousands with a K.

DON'T: Do not truncate a counter with an ellipsis.

DO: Use a white dot when the exact count cannot be determined.

DON'T: Do not hide the badge when the count cannot be determined.