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 a Materialize 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

1 Message 4Warning Event

Materialize 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

Weather 4

today weather.
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

  
    35JS
  
    27Jquery
  
    54Ajax
  
    40Json

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4