Materialize CSS Badges
Materialized CSS badges are used to denote new or unread online notifications. These notifications can be either in numeric format or icon format.
Badge With Collection
To create badge, add .badge class to the <span> element base class.
To provide background color around the badge component, add .new class to the <span> element having class .span.
General Syntax
<div class="collection">
<a href="#!" class="collection-item">
<span class="badge">1</span>Message
</a>
</div>
Source Code
<div class="collection">
<a href="#!" class="collection-item">
<span class="badge">1</span> Message
</a>
<a href="#!" class="collection-item">
<span class="new badge">4</span>Warning
</a>
<a href="#!" class="collection-item">Event</a>
</div>
Source Code: Output
Badges in Dropdown
General Syntax
<ul id="dropdown2" class="dropdown-content">
<li>
<a href="#!">Web design<span class="badge">1</span></a>
</li>
</ul>
Source Code
<div class="container">
<ul id="dropdown2" class="dropdown-content">
<li>
<a href="#!">Web design <span class="badge">1</span> </a>
</li>
<li>
<a href="#!">Graphisc Design <span class="new badge">1</span> </a>
</li>
<li>
<a href="#!">App Design</a>
</li>
</ul>
<a class="btn dropdown-trigger" href="#!" data-target="dropdown2"> Design
<i class="material-icons right">arrow_drop_down</i>
</a>
</div>
Source Code: Output
Badge Inside Navbar
Source Code
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>
<a href="#">Notification <span class="new badge">40</span></a>
</li>
</ul>
</div>
</nav>
Source Code: Output
Badges Inside Collapsible Component
General Syntax
<ul class="collapsible">
<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.</p></div>
</li>
</ul>
Source Code
<ul class="collapsible">
<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.</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.</p>
</div>
</li>
</ul>
Source Code: Output
-
filter Weather 4
today weather.
-
place New Place 1
Visit new places.
Badge Color
General Syntax
<a href="#!" class="collection-item">
<span class="new badge green" data-badge-caption="Examples">35</span> JS
</a>
Source Code
<div class="collection">
<a href="#!" class="collection-item">
<span class="new badge green" data-badge-caption="Examples">35</span>JS
</a>
<a href="#!" class="collection-item">
<span class="new badge blue" data-badge-caption="Examples">27</span>Jquery
</a>
<a href="#!" class="collection-item">
<span class="new badge purple" data-badge-caption="Examples">54</span>Ajax
</a>
<a href="#!" class="collection-item">
<span class="new badge red" data-badge-caption="Examples">40</span>Json
</a>
</div>
Source Code: Output
Web Tutorials
