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.
You can use badges in any type of the Collection.
<ul class="collection">
<li> <a href="#!" class="collection-item">Alan<span class="badge">1</span></a></li>
<li><a href="#!" class="collection-item">Alan<span class="new badge">4</span></a></li>
<li><a href="#!" class="collection-item">Alan</a></li>
<li><a href="#!" class="collection-item">Alan<span class="badge">14</span></a></li>
</ul>
<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-trigger" href="#!" data-target="dropdown2">Dropdown<i class="material-icons right">arrow_drop_down</i></a>
-
filter_dramaFirst 4
Lorem ipsum dolor sit amet.
-
placeSecond 1
Lorem ipsum dolor sit amet.
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header">
<i class="material-icons">filter_drama</i>
First
<span class="new badge">4</span></div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">place</i>
Second
<span class="badge">1</span></div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
</ul>Options
You can customize captions in many ways.
<span class="new badge" data-badge-caption="custom caption">4</span>
<span class="badge" data-badge-caption="custom caption">4</span>
<a href="#!" class="collection-item">Gradient with shadow<span class="new badge gradient-45deg-purple-deep-orange gradient-shadow" data-badge-caption="gradient purple orange">4 </span></a>
<a href="#!" class="collection-item">Gradient<span class="new badge gradient-45deg-light-blue-cyan" data-badge-caption="gradient blue cyan">4</span></a>
<span class="new badge red">4</span>
<span class="new badge blue">4</span>