Materialize CSS Badges

Materialize badge is a component that is used to notify, if there are new or unread messages or notifications display. Adding a new class to a badge component gives it a background.

There are different ways of using badge component:

• Badges in Collections: 
   

<div class="collection"> 
<a href="#!" class="collection-item"><span class="badge">1</span>Message</a> 
<a href="#!" class="collection-item"><span class="new badge">5</span>Message</a> 
<a href="#!" class="collection-item">Message</a> 
<a href="#!" class="collection-item"><span class="badge">10</span>Message</a> 
</div>

• Badges in Dropdown: 
   

<ul id="dropdown2" class="dropdown-content"> 
<li><a href="#!">one<span class="badge">1</span></a></li> 
<li><a href="#!">two<span class="new badge">4</span></a></li> 
<li><a href="#!">three</a></li> 
</ul> 
<a class="btn dropdown-trigger" href="#!" 
data-target="dropdown2"> 
Dropdown 
<i class="material-icons right">arrow_drop_down</i></a> 
 

• Badges in Navbar: 
   

<nav> 
<div class="nav-wrapper"> 
<a href="" class="brand-logo">Navbar</a> 
<ul id="nav-mobile" class="right hide-on-med-and-down"> 
<li><a href="">menu1</a></li> 
<li><a href="">menu2 <span 
class="new badge">4</span></a></li> 
<li><a href="">menu3</a></li> 
</ul> 
</div> 
</nav>

Example:

Output: 
 

👁 Image

Badges in Collapsible

We can also add badges in a Collapsible. Given below is the syntax to add badges to collapsible :

 <h2>Badges in Collapsibles</h2>
 <ul class="collapsible">
 <li>
 <div class="collapsible-header">
 <i class="material-icons">filter_drama</i>
 First
 <span class="new badge">4</span>
 </div>
 <div class="collapsible-body">
 <p>Lorem ipsum dolor sit amet.</p>
 </div>
 </li>
 <li>
 <div class="collapsible-header">
 <i class="material-icons">place</i>
 Second
 <span class="badge">1</span>
 </div>
 <div class="collapsible-body">
 <p>Lorem ipsum dolor sit amet.</p>
 </div>
 </li>
 </ul>

Full Code :

Output:

👁 Image

Custom Captions

We can add customize captions to our badge instead of just a number or new using the "data-badge-caption" attribute. 

Syntax:

 <span class="new badge" data-badge-caption="...">4</span>

Inside the "data-badge-caption" attribute , we can add our own captions like messages, likes and so on.

Full Code example:

Output:

👁 Image

Colors 

We can make badges of different colors by mentioning them in the class along with the "card" class.

Syntax:

 <span class="new badge red">...</span>

Full code example:

Output:

👁 Image

Supported Browsers

• Google Chrome
• Microsoft Edge
• Brave Browser
• Mozilla Firefox
• Safari
• Opera