Important Links

Get Started

Components

Avatar Alert Badge Button Cards Image Input Texts Utilites List Navigation Rating Snackbar Grid Modal

Home Components Badge

Badge

Badges are used to highlight an item's status for quick recognition.

Usages

To achieve the above badge, you need to follow the following code:

                
                  < -- For Online Badge -->
                  

                  <div class="badge"> 
 
                    <img class="avatar" src="url"</img>
                    

                  <div class="online"></div> 
 
                  </div>
                  

                  

                  < -- For Offline Badge -->
                  

                  <div class="badge"> 
 
                    <img class="avatar" src="url"</img>
                    

                  <div class="offline"></div> 
 
                  </div>
                    

                  

                  < -- For DND Badge -->
                  

                  <div class="badge"> 
 
                    <img class="avatar" src="url"</img>
                    

                  <div class="dnd"></div> 
 
                  </div>

Icon Badge

Icon Badge is used to show the quantity on the top of the svg/image.

Usages

To achieve the above Badge, you need to follow the following code:

                
                  < -- For Online Badge -->
                  

                  <div class="badge"> 
 
                    <img class="avatar" src="url"</img>
                    

                  <div class="number"></div> 
 
                  </div>

Alert

Button