Materialize CSS Badges

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 CSS badge.

  • To create badge, add .badge class 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 .new to 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>    
Try It Now

Source Code

Download
<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>    
Try it yourself

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>    
Try It Now

Source Code

Download
<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>    
Try it yourself

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>    
Try It Now

Source Code

Download
<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>    
Try it yourself

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

Download
<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>    
Try it yourself

Source Code : Output

Badge Caption Customization

You can easily customize badge caption with the help of data-badge-caption data attribute.

General Syntax

<span class="new badge" data-badge-caption="Custom Caption">Badge</span>    
Try It Now

Source Code

Download
<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>    
Try it yourself

Source Code : Output

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS