Materialize CSS Badges
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.
- To create badge, add
.badgeclass to the<span>element base class i.e<span class="badge">.Badge
<span class="badge">Badge</span> - To provide badge default background color, add the additional class
.newto the<span>element's base class i.e<span class="badge new" >.Badge Default Color
<span class="badge new">Badge</span>
Badge With Collection
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.
General Syntax
<div class="collection">
<a href="#!" class="collection-item">
<span class="badge">1</span> Badge Message
</a>
</div> Source Code
Download<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> Source Code : Output
Badge Color
If you want to assign the default badge color, then you have to add the .new class to the <span> element that has the .badgeclass.
To create badge custom background color, simply assign base color class to the <span> element that contains .badge class.
General Syntax
<element class="new badge"></element>
<element class="new badge {BaseColorName}"></element> Source Code
Download<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> Source Code : Output
Badges in Dropdown
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.
General Syntax
<ul id="dropdown" class="dropdown-content">
<li>
<a href="#!">Web Design
<span class="badge">1</span>
</a>
</li>
</ul> Source Code
Download<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> Source Code : Output
Badges In Collapsibles
To create a badge inside the collapsible component, simply placed the badge inside the collapsible header component.
Source Code
Download<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> Source Code : Output
Badge Caption Customization
You can easily customize badge caption with the help of data-badge-caption data attribute.
General Syntax
<span class="new badge" data-badge-caption="Custom Caption">Badge</span> Source Code
Download<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>