December 2, 2016

Materialize Badges

Materialize Badges : Badges are basically used to show the notifications or unread messages. Materialize provides inbuilt classes to show Badges. Here in this tutorial we are going to explain how you can use badges in Materialize framework. You can also use our online demo edit and run the code online.

Materialize Badges Example

Let us go step by step to understand the badges-

Add Badges To Collections

Class badge is used to create badge and class new badge is used to add background to the badges. Here is an example to add badges in collections simply as below –

Materialize Add Badges In Collections Example:

 <div class="collection">
    <a href="#!" class="collection-item"><span class="badge">2</span>Dummy</a>
    <a href="#!" class="collection-item">Dummy</a>
    <a href="#!" class="collection-item"><span class="new badge">5</span>Dummy</a>    
  </div>

Try it »

If you run the above example it will produce output something like this –

Add Badges To Dropdown

You can add badges to dropdown menu simply as below –

Materialize Add badges to Dropdown Menu:

 <ul id="mydropdown" class="dropdown-content">
    <li><a href="#!">Item 1<span class="badge">1</span></a></li>
    <li><a href="#!">Item 2<span class="new badge">1</span></a></li>
    <li><a href="#!">Item 3</a></li>
  </ul>
  <a class="btn dropdown-button" href="#!" data-activates="mydropdown">My Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a>

Try it »

If you run the above example it will produce output something like this –

Add Badges To Navbar

Materialize Add badges to Navbar:

 <nav>
  <div class="nav-wrapper">
    <a href="" class="brand-logo">Tutorialsplane.com</a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li><a href="">Profile</a></li>
      <li><a href="">Messages<span class="new badge">4</span></a></li>
      <li><a href="">Logout</a></li>
    </ul>
  </div>
</nav>

Try it »

If you run the above example it will produce output something like this –

Add Badges To Collapsibles

You can add badges to collapsibles simply as below –

Materialize Add badges to Collapsibles:

 <ul class="collapsible" data-collapsible="accordion">
  <li>
    <div class="collapsible-header"><span class="new badge">4</span><i class="material-icons">perm_media</i>First</div>
    <div class="collapsible-body"><p>This is dummy description.</p></div>
  </li>
  <li>
    <div class="collapsible-header"><span class="new badge">10</span><i class="material-icons">perm_scan_wifi</i>First</div>
    <div class="collapsible-body"><p>This is dummy description.</p></div>
  </li>
  <li>
    <div class="collapsible-header"><span class="badge">2</span><i class="material-icons">shopping_cart</i>Second</div>
    <div class="collapsible-body"><p>This is dummy description.</p></div>
  </li>
</ul>

Try it »

If you run the above example it will produce output something like this –

Learn More

Let us have some More example and demo about the Angular Material Chips.

Custom Captions

Materialize Add badges to Custom Captions:

  <span class="new badge" data-badge-caption="My caption">5</span>
  <span class="badge" data-badge-caption="My caption">6</span>

Try it »

Add Custom Color

If you want to add color to the badges you can add simply as below –

Materialize Add Color to badges Example:

 <span class="new badge red">14</span>
  <span class="new badge yellow">10</span>

Materialize Badges