Materialize CSS badges specify new/unread online notification. These notifications can be either in numeric format or icon format.
Basic steps to create, Materialize CSS badge.
.badge
class to the <span>
element base class i.e <span class="badge">
.
<span class="badge">Badge</span>
.new
to the <span>
element's base class i.e <span class="badge new" >
.
<span class="badge new">Badge</span>
To create badge inside collection, simply place the <span>
element inside the collection item and assign the .badge
class to the <span>
element's base class.
<div class="collection">
<a href="#!" class="collection-item">
<span class="badge">1</span> Badge Message
</a>
</div>
<div class="collection">
<a href="#!" class="collection-item">
<span class="badge">1</span>Email
</a>
<a href="#!" class="collection-item">
<span class="new badge">4</span>Users
</a>
</div>
If you want to assign the default badge color, then you have to add the .new
class to the <span>
element that has the .badge
class.
To create badge custom background color, simply assign base color class to the <span>
element that contains .badge
class.
<element class="new badge"></element>
<element class="new badge {BaseColorName}"></element>
<div class="row">
<div class="col s12">
<div class="collection">
<a href="#!" class="collection-item">Email
<span class="new badge red" >105</span>
</a>
<a href="#!" class="collection-item">Message
<span class="new badge blue" >445</span>
</a>
</div>
</div>
</div>
Badges will be placed inside the dropdown menu easily. To create badges inside the dropdown menu, simply place the badge inside the dropdown list item.
<ul id="dropdown" class="dropdown-content">
<li>
<a href="#!">Web Design
<span class="badge">1</span>
</a>
</li>
</ul>
<ul id="dropdown_id" class="dropdown-content">
<li>
<a href="#!">Web design <span class="badge">1</span></a>
</li>
<li>
<a href="#!">App Design</a>
</li>
</ul>
<a class="btn dropdown-trigger" href="#!" data-target="dropdown_id">
Design
<i class="material-icons right">arrow_drop_down</i>
</a>
To create a badge inside the collapsible component, simply placed the badge inside the collapsible header component.
<ul class="collapsible" id="nav-mobile">
<li>
<div class="collapsible-header">
<i class="material-icons">filter</i>
Weather
<span class="new badge">4</span></div>
<div class="collapsible-body">
<p>today weather report.</p>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">place</i>
New Place
<span class="badge">1</span></div>
<div class="collapsible-body"><p>Visit new places to explore.</p></div>
</li>
</ul>
You can easily customize badge caption with the help of data-badge-caption
data attribute.
<span class="new badge" data-badge-caption="Custom Caption">Badge</span>
<div class="collection">
<a href="#!" class="collection-item">
Email
<span class="new badge green" data-badge-caption=" Messages">105</span>
</a>
<a href="#!" class="collection-item">
Alerts
<span class="new badge red" data-badge-caption=" Warnings">10</span>
</a>
</div>