Badges can notify you that there are new or unread messages or notifications. Add the new class to the badge to give it the background.

Collections

<div class="collection">
    <a href="#!" class="collection-item">Alan<span class="badge">1</span></a>
    <a href="#!" class="collection-item">Alan<span class="new badge">4</span></a>
    <a href="#!" class="collection-item">Alan</a>
    <a href="#!" class="collection-item">Alan<span class="badge">14</span></a>
  </div>

Custom Caption

<span class="new badge" data-badge-caption="custom caption">4</span>
<span class="badge" data-badge-caption="custom caption">4</span>

Badges in Dropdown

• one1
• two1
• three

Dropdown

<ul id="dropdown2" class="dropdown-content">
    <li><a href="#!">one<span class="badge">1</span></a></li>
    <li><a href="#!">two<span class="new badge">1</span></a></li>
    <li><a href="#!">three</a></li>
</ul>
<a class="btn dropdown-button" href="#!" data-activates="dropdown2">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a>

Colors

<span class="new badge red">4</span>
<span class="new badge blue">4</span>