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=
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet" />
<!-- Compiled and minified CSS -->
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" />
<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=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
</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">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- 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">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- 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">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- 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