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

              
                 
                

                  user
                  
                

                

                  NG
                  
                

                

                  user
                  
                

                

                  NG
                  X

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 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

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

              
                
                

                  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
Previous Next