Materialize badges | how to use badge class
Deepak Tailor - Jan 16 2021
We use the badge class to count any message or to count notifications. In this we can use square and round badges with background colors.
<p>Simple Badge without background<span class="badge">+99</span></p>
<p>Simple Badge with background<span class="badge red white-text">+99</span></p>Badges use in Collections
Live Demo<div class="collection">
<a href="#!" class="collection-item"><span class="badge red white-text">+91</span>Inbox</a>
<a href="#!" class="collection-item"><span class="badge blue white-text">+4</span>Star</a>
<a href="#!" class="collection-item"><span class="badge green white-text">+6</span>Saved</a>
<a href="#!" class="collection-item"><span class="badge orange white-text">+14</span>Sent</a>
<a href="#!" class="collection-item"><span class="badge cyan white-text">+104</span>Draft</a>
</div>Rounded badges use in Collection
<div class="collection">
<a href="#!" class="collection-item"><span class="badge red white-text" style="border-radius: 10px 10px;">+91</span>Inbox</a>
<a href="#!" class="collection-item"><span class="badge blue white-text" style="border-radius: 10px 10px;">+4</span>Star</a>
<a href="#!" class="collection-item"><span class="badge green white-text" style="border-radius: 10px 10px;">+6</span>Saved</a>
<a href="#!" class="collection-item"><span class="badge orange white-text" style="border-radius: 10px 10px;">+14</span>Sent</a>
<a href="#!" class="collection-item"><span class="badge cyan white-text" style="border-radius: 10px 10px;">+104</span>Draft</a>
</div>Badges use in Dropdown
Live Demo<ul id="dropdown2" class="dropdown-content">
<li><a href="#!">Active<span class="badge">1</span></a></li>
<li><a href="#!">Inactive<span class="badge red white-text">15</span></a></li>
<li><a href="#!">Out of Stock</a></li>
</ul>
<a class="btn dropdown-trigger" href="#!" data-target="dropdown2">Dropdown<i class="material-icons right">arrow_drop_down</i></a>Rounded badges use in Dropdown
<ul id="dropdown1" class="dropdown-content">
<li><a href="#!">Active<span class="badge green white-text" style="border-radius: 10px 10px;">1</span></a></li>
<li><a href="#!">Inactive<span class="badge red white-text" style="border-radius: 10px 10px;">15</span></a></li>
<li><a href="#!">Out of Stock<span class="badge red white-text" style="border-radius: 10px 10px;">15</span></a></li>
</ul>
<a class="btn dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a>Badges use in Navbar
Live Demo<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="">Home</a></li>
<li><a href="">Notification<span class="new badge blue white-text">+24</span></a></li>
<li><a href="">Email<span class="new badge blue white-text">+8</span></a></li>
</ul>
</div>
</nav>Rounded badges use in Navbar
<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="">Home<span class="new badge" data-badge-caption="custom caption">4</span></a></li>
<li><a href="">Notification<span class="badge blue white-text" style="border-radius: 10px 10px;">+24</span></a></li>
<li><a href="">Email<span class="badge green white-text" style="border-radius: 10px 10px;">+8</span></a></li>
</ul>
</div>
</nav>Deepak Tailor
My name is Deepak tailor as a fullstack developer. I have been in the IT industry (PHP, Nodejs, flutter) for the last 5 years. For professional and customize web development & app development, you can send inquiry on our email.
----
You can contact him at deepaktailor10@yahoo.in
