Open In App

Materialize CSS Badges

Improve
Improve
Like Article
Like
Save
Share
Report

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

Example:

html




<!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>


Output: 
 

Badges in Collapsible

We can also add badges in a Collapsible. Given below is the syntax to add badges to collapsible :

 <h2>Badges in Collapsibles</h2>
    <ul class="collapsible">
        <li>
            <div class="collapsible-header">
                <i class="material-icons">filter_drama</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">place</i>
                Second
                <span class="badge">1</span>
            </div>
            <div class="collapsible-body">
                <p>Lorem ipsum dolor sit amet.</p>
            </div>
        </li>
    </ul>

Full Code :

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Compiled and minified CSS -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified JavaScript -->
  
    <title>Document</title>
</head>
  
<body>
    <h2>Badges in Collapsibles</h2>
    <ul class="collapsible">
        <li>
            <div class="collapsible-header">
                <i class="material-icons">filter_drama</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">place</i>
                Second
                <span class="badge">1</span>
            </div>
            <div class="collapsible-body">
                  
<p>Lorem ipsum dolor sit amet.</p>
  
            </div>
        </li>
    </ul>
  
    <!-- Compiled and minified JavaScript -->
</body>
  
</html>


Output:

Custom Captions

We can add customize captions to our badge instead of just a number or new using the “data-badge-caption” attribute. 

Syntax:

 <span class="new badge" data-badge-caption="...">4</span>

Inside the “data-badge-caption” attribute , we can add our own captions like messages, likes and so on.

Full Code example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Compiled and minified CSS -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified JavaScript -->
  
    <title>Document</title>
</head>
  
<body>
    <h2>Badges Custom Captions</h2>
    <div class="collection">
        <a href="#!" class="collection-item"><span class=" new badge" data-badge-caption="Messages">1</span>Facebook</a>
        <a href="#!" class="collection-item"><span class="  new badge" data-badge-caption="Messages">4</span>Instagram</a>
  
    </div>
  
    <!-- Compiled and minified JavaScript -->
</body>
  
</html>


Output:

Colors 

We can make badges of different colors by mentioning them in the class along with the “card” class.

Syntax:

 <span class="new badge red">...</span>

Full code example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Compiled and minified CSS -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified JavaScript -->
  
    <title>Document</title>
</head>
  
<body>
    <h2>Badges of Different Colors</h2>
    <div class="collection">
        <a href="#!" class="collection-item"><span class=" new badge red" >1</span>Facebook</a>
        <a href="#!" class="collection-item"><span class="  new badge blue" >4</span>Instagram</a>
  
    </div>
  
    <!-- Compiled and minified JavaScript -->
</body>
  
</html>


Output:

Supported Browsers

  • Google Chrome
  • Microsoft Edge
  • Brave Browser
  • Mozilla Firefox
  • Safari
  • Opera


Last Updated : 16 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads