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

[su_divider top=”no” size=”2″ margin=”3″]

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 –

Materialize Badges Example

Add Badges To Dropdown

[su_divider top=”no” size=”2″ margin=”3″]

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 –

Materialize Badges Example In Dropdown

Add Badges To Navbar

[su_divider top=”no” size=”2″ margin=”3″]

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 –

Badges in header navigation

Add Badges To Collapsibles

[su_divider top=”no” size=”2″ margin=”3″]

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 –

Badges in Collapsible

Learn More

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


Custom Captions

[su_divider top=”no” size=”2″ margin=”3″]

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

[su_divider top=”no” size=”2″ margin=”3″]

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>
                                                                                                                                                                                                                                                    

Try it »

The above example will give output something like this –

Materialize Add Color to Badges


User Ans/Comments

📖 Read More


Advertisements