Badges

Use the Badge Component Symbol to draw attention to another interface element or to display a notification. It enhances the component to which it is attached with additional information, disclosed to the user upon interacting with it.

Badge on Icons

Below is the example of badge on icons. These can be used in e-commerce or social media websites.

                               
                                  <!-- use these classes to add badge on icons -->

                                  <div class="badge-container">
                                      <i class="fas fa-shopping-cart"></i>
                                      <span class="badge">3</span>
                                  </div>

                                  <div class="badge-container">
                                      <i class="fas fa-user"></i>
                                      <span class="badge">7</span>
                                  </div>

                                  <div class="badge-container">
                                      <i class="fas fa-envelope"></i>
                                      <span class="badge">8</span>
                                  </div>
                               
                           

Badge on Avatars

These are the examples of badges on avatars, can be made using particular classes.

                                
                                    <!-- use particular classes to make badge on avatar. -->

                                    <div class="badge-container">
                                        <img class="profile-avatar" src="../../assets/avatar1.jpg" alt="avatar">
                                        <div class="badge-online"></div>
                                    </div>

                                    <div class="badge-container">
                                        <img class="profile-avatar" src="../../assets/avatar2.png" alt="avatar">
                                        <div class="badge-offline"></div>
                                    </div>
                                
                            

Badge on Button

These are the example of badge on buttons.

                                
                                    <!-- use these classes to make badge on buttons -->

                                    <div class="badge-container">
                                        <button class="docs-btn btn-danger" href="#">danger</button>
                                        <span class="btn-badge">7</span>
                                    </div>

                                    <div class="badge-container">
                                        <button class="docs-btn btn-simple" href="#">simple</button>
                                        <span class="btn-badge">2</span>
                                    </div>