Badges
Materialize is a modern responsive CSS framework based on Material Design by Google.
Badges can notify you that there are new or unread messages or notifications. Add the
new class to the badge to give it the background.
Collections
<div class="collection">
<a href="#!" class="collection-item"><span class="badge">1</span>Alan</a>
<a href="#!" class="collection-item"><span class="new badge">4</span>Alan</a>
<a href="#!" class="collection-item">Alan</a>
<a href="#!" class="collection-item"><span class="badge">14</span>Alan</a>
</div>Badges in Dropdown
Dropdownarrow_drop_down<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>
<a class="btn dropdown-trigger" href="#!" data-target="dropdown2">Dropdown<i class="material-icons right">arrow_drop_down</i></a>Badges in Collapsibles
-
filter_dramaFirst4
Lorem ipsum dolor sit amet.
-
placeSecond1
Lorem ipsum dolor sit amet.
-
textsmsThird4
Lorem ipsum dolor sit amet.
<ul class="collapsible">
<li>
<div class="collapsible-header">
<i class="material-icons">filter_drama</i>
<div class="collapsible-header-content">First</div>
<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>
<div class="collapsible-header-content">Second</div>
<span class="badge">1</span></div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">textsms</i>
<div class="collapsible-header-content">Third</div>
<span class="badge new">4</span></div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
</ul>Card Badges
Use badges on image cards to highlight a status, recommendation, or availability.
Place a card-badges group inside card-image to display custom labels above the image. Badges sit in the top-right corner by default; add left to move the group to the top-left. Multiple badges wrap when space is limited.
Lakeside escape
Combine custom labels and colors without changing the card layout.
Weekend adventure
Use icons and the existing data-badge-caption attribute for extra context.
<div class="card">
<div class="card-image">
<img src="images/sample-1.jpg" alt="Mountain lake surrounded by trees">
<span class="card-title gradient">Lakeside escape</span>
<div class="card-badges">
<span class="badge">Featured</span>
<span class="badge" style="--card-badge-background: var(--md-sys-color-tertiary-container); --card-badge-color: var(--md-sys-color-on-tertiary-container);">New</span>
</div>
</div>
<div class="card-content"><p>Discover your next destination.</p></div>
</div>Set --card-badge-background and --card-badge-color on a badge, group, or card to customize its colors. Use paired theme tokens so they adapt to light and dark mode. The badges also work with small, medium, and large image cards.
Labels allow clicks through to the image. For an interactive badge, use <a class="badge" href="…">Featured</a> with a descriptive label. No JavaScript is required.
Badges with Icons
Place an icon before the label inside a badge. Kmaterialize centers the icon and text, with consistent sizing for Material Icons and Font Awesome. This works with standard badges and card-overlay badges.
Load the stylesheet for your chosen icon set in the page's <head>, alongside Kmaterialize:
<!-- Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Font Awesome Free -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">Standard badges
Use data-badge-caption="" when your label replaces the default “new” caption. No additional icon alignment classes are needed.
<!-- Material Icons -->
<span class="new badge" data-badge-caption=""><i class="material-icons" aria-hidden="true">lock</i>Project Manager</span>
<!-- Font Awesome -->
<span class="new badge" data-badge-caption=""><i class="fa-solid fa-lock" aria-hidden="true"></i>Project Manager</span>Card badges
Material Icons
Use the icon name as the text of a material-icons element.
<div class="card">
<div class="card-image">
<img src="images/sample-1.jpg" alt="Mountain lake surrounded by trees">
<div class="card-badges">
<span class="badge"><i class="material-icons" aria-hidden="true">star</i>Recommended</span>
<span class="badge"><i class="material-icons" aria-hidden="true">check_circle</i>Available</span>
</div>
</div>
</div>Font Awesome
Use fa-solid and the icon's name class on an empty icon element.
<div class="card">
<div class="card-image">
<img src="images/sample-1.jpg" alt="Mountain lake surrounded by trees">
<div class="card-badges">
<span class="badge"><i class="fa-solid fa-star" aria-hidden="true"></i>Recommended</span>
<span class="badge"><i class="fa-solid fa-circle-check" aria-hidden="true"></i>Available</span>
</div>
</div>
</div>Keep a visible label and mark decorative icons with aria-hidden="true". See the Material Icons guide and Font Awesome guide for more icon choices.
Round Badges
Add round to give a badge a pill shape. Combine it with new, icons, custom captions, and colors. The modifier also works inside card-badges.
<span class="new badge round">4</span>
<span class="new badge round" data-badge-caption=""><i class="material-icons" aria-hidden="true">lock</i>Project Manager</span>
<span class="new badge round" data-badge-caption=""><i class="fa-solid fa-lock" aria-hidden="true"></i>Project Manager</span>Options
You can customize captions in many ways.
Custom Caption
You can explicitly set the caption in a badge using the
data-badge-caption
attribute.
<span class="new badge" data-badge-caption="custom caption">4</span>
<span class="badge" data-badge-caption="custom caption">4</span>