Components

Badge

Badges are being used to display a notification count or status information.

Badge on Avatar

This Badge is used to show the user staus online. It is available in 4 different sizes & colors. You need to include class badge-wrapper on parent avatar and sm-avatar, md-avatar, lg-avatar, badge on the badge component. You can chnage the size by sm-badge, md-badge & lg-badge classes.(e.g. class="badge md-badge")

Don't forget to add Responsive Image class names for img element.

user
NG
user
NG X

Code Snippets

              
                 <!-- Avatar Badge -->
                <div class="badge-wrapper avatar sm-avatar box-shd m-v-1">
                  <img class="rd-bdr" src="user1.png" alt="user">
                  <span class="badge sm-badge badge-br wt-text grid-ctr red-bg"></span>
                </div>
                <div class="badge-wrapper avatar md-avatar grid-ctr yellow-content box-shd m-v-1">
                  NG
                  <span class="badge md-badge badge-br wt-text grid-ctr yellow-bg"></span>
                </div>
                <div class="badge-wrapper avatar lg-avatar box-shd m-v-1">
                  <img class="rd-bdr" src="user4.png" alt="user">
                  <span class="badge badge-br wt-text grid-ctr green-bg"></span>
                </div>
                <div class="badge-wrapper avatar xlg-avatar grid-ctr green-content box-shd m-v-1">
                  NG
                  <span class="badge lg-badge badge-br wt-text grid-ctr wt-bg">X</span>
                </div>

Badge on Icons

Icon badge is used to show cart or notification count, you can use number badge. Check code below to copy the html part as is. Color of badges can be changed as well. You need to include class green-bg, blue-bg, red-bg, &yellow-bg to change color.

Code Snippets

              
                <!-- Badge on Icons -->
                <button class="badge-wrapper primary-icon-btn m-v-1">
                  <i class="fa fa-paper-plane" aria-hidden="true"></i>
                  <span class="badge wt-text grid-ctr blue-bg">19+</span>
                </button>
                <button class="badge-wrapper primary-icon-btn m-v-1">
                  <i class="fa fa-envelope" aria-hidden="true"></i>
                  <span class="badge wt-text grid-ctr red-bg">19+</span>
                </button>
                <button class="badge-wrapper primary-icon-btn m-v-1">
                  <i class="fa fa-heart-o" aria-hidden="true"></i>
                  <span class="badge wt-text grid-ctr green-bg">19+</span>
                </button>

Badge on Button

You can put badge on button by including btn-badge class. Badge on button can also be toggle to show/hide the badge. You can also alter the count on clicking the badge. The colors on badges can be inverted as well. You need to include class blue-content, yellow-content, red-content & green-content.

Code Snippets

HTML snippet

              
                <!-- Badge on Button -->
                <button class="badge-wrapper btn-badge btn primary-btn m-2">
                  Button
                  <span class="badge wt-text grid-ctr blue-content">99+</span>
                </button>
                <button class="badge-wrapper btn-badge toogle-badge-btn btn primary-btn m-2">
                  Toggle Badge
                  <span class="badge wt-text grid-ctr yellow-content">9</span>
                </button>
                <button class="badge-wrapper btn-badge toogle-icon-badge-btn btn primary-btn m-2">
                  <i class="fa fa-heart-o" aria-hidden="true"></i>
                  <span class="badge badge-tl wt-text grid-ctr green-content">14</span>
                </button>

JS snippet

              
                // toggle badge
                const toggleBadgeBtn = document.querySelector(".toogle-badge-btn");
                const toggleBadge = document.querySelector(".toogle-badge-btn .badge");

                toggleBadgeBtn.addEventListener("click", () => {
                  toggleBadge.classList.toggle("hide");
                });

                // icon badge count
                const toggleIconBadgeBtn = document.querySelector(".toogle-icon-badge-btn");
                const iconBadgeBtn = document.querySelector(".toogle-icon-badge-btn i");
                const toggleIconBadge = document.querySelector(".toogle-icon-badge-btn .badge");

                toggleIconBadgeBtn.addEventListener("click", () => {
                  let isLiked = iconBadgeBtn.classList.contains("fa-heart-o");
                  iconBadgeBtn.className = isLiked ? "fa fa-heart" : "fa fa-heart-o";
                  toggleIconBadge.textContent = isLiked ? +toggleIconBadge.innerText + 1 : +toggleIconBadge.innerText - 1;
                });

Badge with text

Badge can be included with texts. You need to add class text-badge to your badge.

Text heading with a large badge NEW

Text heading with a medium badge NEW

Text heading with a small badge NEW

Paragraph heading with a default badge NEW

Code Snippets

              
                <!-- Badge with text -->
                <h1 class="badge-wrapper m-v-1">
                  Text heading with a large badge
                  <span class="badge lg-badge text-badge wt-text grid-ctr blue-content">NEW</span>
                </h1>
                <h2 class="badge-wrapper m-v-1">
                  Text heading with a medium badge
                  <span class="badge md-badge text-badge wt-text grid-ctr blue-content">NEW</span>
                </h2>
                <h6 class="badge-wrapper m-v-1">
                  Text heading with a small badge
                  <span class="badge sm-badge text-badge wt-text grid-ctr blue-content">NEW</span>
                </h6>
                <p class="badge-wrapper m-v-1">
                  Paragraph heading with a default badge
                  <span class="badge text-badge wt-text grid-ctr blue-content">NEW</span>
                </p>
Previous Next