Badges are one of the very useful components of Materialize CSS. It is like an icon and helps us to display things like unread messages, notifications, emails, and all other such things. In this article, we will discuss how to use the badge in Materialize CSS. A badge can be defined by adding the badge class inside a span element. We can add a background to the badge by using the new class.
Syntax:
<span class="badge">Badge Text</span> <span class="badge new">New Badge Text</span>
The below examples show the multiple ways by which a badge can be added in Materialize CSS.
Example 1: Using a Badge in Collections.
HTML
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet">
<link href=
rel="stylesheet" >
</head>
<body class="container">
<h1>Using Badges with Collection</h1>
<div class="collection">
<a href="#!" class="collection-item">
<span class="badge">1</span>Item One
</a>
<a href="#!" class="collection-item">
<span class="new badge">4</span>Item Two
</a>
<a href="#!" class="collection-item">
Item Three
</a>
<a href="#!" class="collection-item">
<span class="new badge">14</span>Item Four
</a>
</div>
<script src=
</script>
</body>
</html>
|
Output:
Example 2: Using a Badge in a Collapsible.
HTML
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet">
<link href=
rel="stylesheet">
</head>
<body class="container">
<h1>Using Badges with collapsible</h1>
<ul class="collapsible">
<li>
<div class="collapsible-header">
First Header
<span class="new badge">4</span>
</div>
<div class="collapsible-body">
<p>Body of First Item</p>
</div>
</li>
<li>
<div class="collapsible-header">
Second Header
<span class="badge">1</span>
</div>
<div class="collapsible-body">
<p>Body of Second Item</p>
</div>
</li>
</ul>
<script src=
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems, {
accordion: false
});
});
</script>
</body>
</html>
|
Output:
Example 3: Using a Badge in Dropdowns
HTML
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet">
<link rel="stylesheet" href=
>
</head>
<body class="container">
<h1>Using Badges with Dropdown</h1>
<!-- Dropdown Trigger -->
<a class='dropdown-trigger btn' href='#' data-target='dropdown2'>
Dropdown
<i class="material-icons right">
arrow_drop_down
</i>
</a>
<!-- Dropdown Structure -->
<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">1</span>
</a>
</li>
<li>
<a href="#!">three</a>
</li>
</ul>
<script src=
</script>
<script>
document.addEventListener(
'DOMContentLoaded', function () {
var elems =
document.querySelectorAll('.dropdown-trigger');
var instances =
M.Dropdown.init(elems, { coverTrigger: false });
});
</script>
</body>
</html>
|
Output:
Example 4: Using a Badge in the Navbar
HTML
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet">
<link href=
rel="stylesheet">
</head>
<body>
<h1>Using Badges with navbar</h1>
<nav>
<div class="nav-wrapper">
<a href="" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right">
<li><a href="">Item One</a></li>
<li>
<a href="">Item Two
<span class="new badge">4</span>
</a>
</li>
<li><a href="">Item Three</a></li>
</ul>
</div>
</nav>
<script src=
</script>
</body>
</html>
|
Output:
Example 5: Changing the background color of the badges
HTML
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet">
<link href=
rel="stylesheet" >
</head>
<body class="container">
<h1>Using Badges with Collection</h1>
<div class="collection">
<a href="#!" class="collection-item">
<span class="badge ">1</span>Item One
</a>
<a href="#!" class="collection-item">
<span class="new badge red ">4</span>Item Two
</a>
<a href="#!" class="collection-item">
Item Three
</a>
<a href="#!" class="collection-item">
<span class=" new badge blue ">14</span>Item Four
</a>
</div>
<script src=
</script>
</body>
</html>
|
Output: