Materialize badge is a component that is used to notify, if there are new or unread messages or notifications dispaly. 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>

  
  

  
  

• Badges in Collapsible:
  

  <ul class=”collapsible”>
  <li>
  <div class=”collapsible-header”>
  <i class=”material-icons”>add</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”>arrow_forward</i>
  Second
  <span class=”badge “>1</span></div>
  <div class=”collapsible-body”><p>Lorem ipsum dolor sit amet.</p></div>
  </li>
  </ul>

Example:

Output: