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>
    
Try it now

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>
        
Try it now

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>
    
Try it now

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>
        
Try it now

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>
        
Try it now

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>
    
Try it now

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>
        
Try it now

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>
    
Try it now

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>
        
Try it now

Source Code: Output

Web Tutorials

Materialize CSS Badges
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4