Badges can notify you that there are new or unread messages or notifications. Add the newclass 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>