Materialize CSS Badges
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" </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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <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 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <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 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <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 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </body> </html> |
Output:
Supported Browsers
- Google Chrome
- Microsoft Edge
- Brave Browser
- Mozilla Firefox
- Safari
- Opera
Please Login to comment...