Materialize badges | how to use badge class

Deepak Tailor Image
Deepak Tailor - Jan 16 2021
Materialize badges | how to use badge class

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 Image
Deepak Tailor

My name is Deepak tailor as a fullstack developer. I have been in the IT industry for the last 5 years. For professional and customize web development, you can send inquiry on our email.
----
You can contact him at support@fulstackdev.com