Materialize CSS | Badges

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <!--Import Google Icon Font-->
        <link href=
              rel="stylesheet" />
  
        <!-- Compiled and minified CSS -->
        <link rel="stylesheet"
              href=
  
        <script type="text/javascript" 
                src="https://code.jquery.com/jquery-2.1.1.min.js">
      </script>
        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0" />
    </head>
  
    <body>
        <h3>Badges in collections</h3>
        <div class="collection">
            <a href="#!" 
               class="collection-item green-text">
              <span class="badge green-text">1</span>Message</a>
            
            <a href="#!" 
               class="collection-item green-text">
              <span class="new badge green">4</span>Message</a>
            
            <a href="#!" 
               class="collection-item green-text">Message</a>
            
            <a href="#!" 
               class="collection-item green-text">
              <span class="badge green-text">10</span>Message</a>
        </div>
        <h3>Badges in dropdowns</h3>
        <ul id="dropdown" class="dropdown-content">
            <li>
                <a href="#" 
                   class="green-text">Inbox
                  <span class="badge green-text">22</span></a>
            </li>
            <li>
                <a href="#!" 
                   class="green-text">Unread
                  <span class="new badge green">14</span></a>
            </li>
            <li><a href="#" class="green-text">Sent</a></li>
            <li>
                <a href="#" 
                   class="green-text">Outbox
                  <span class="badge green-text">10</span></a>
            </li>
        </ul>
        <a class="btn dropdown-button green"
           href="#" 
           data-activates="dropdown"> Dropdown
          <i class="mdi-navigation-arrow-drop-down right"></i></a>
        <div>
            <h3>Badges in Navbar</h3>
            <nav>
                <div class="nav-wrapper green">
                    <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>
        </div>
        <div>
            <h3>Badges in Collapsible</h3>
            <ul class="collapsible">
                <li>
                    <div class="collapsible-header">
                        <i class="material-icons">add</i>
                        First
                        <span class="new badge green">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 green-text">1</span>
                    </div>
                    <div class="collapsible-body">
                      <p>Lorem ipsum dolor sit amet.</p></div>
                </li>
            </ul>
        </div>
  
        <!-- Compiled and minified JavaScript -->
        <script src=
      </script>
    </body>
</html>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.