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