Explain Badge in Materialize CSS ?

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.

 

Output:

👁 Image

Example 2: Using a Badge in a Collapsible.

Output:

👁 Image

Example 3: Using a Badge in Dropdowns

Output:

👁 Image

Example 4: Using a Badge in the Navbar

Output:

👁 Image

Example 5: Changing the background color of the badges

Output:

👁 Image