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 badges.
- 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
<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
<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
<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
<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
General Syntax
<span class="new badge" data-badge-caption="Custom Caption">Badge</span>
Source Code
<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>
Source Code : Output
Conclusion
Material CSS badges are used to notify the new or unread messages or notifications. It is used with the collection, dropdown, collapsible, and navbar menu to show the new messages.
Web Tutorials
