Badge

Badges are showing a small amount of color-categorized meta data. They are ideal for getting users attention. Either they represent some data or status using various color combinations.

Profile Badge

Profile badges can used to display user states of a user.

avatar
avatar
avatar
avatar
avatar 
                    
                        <-- Using the 'badge' class name -->
                        

                        <-- Use the 'online' class name for showing online status -->
                        <div class="badge">
                            <img class="avatar" src="../assets/avatars/avatar1.jpg" alt="avatar" />
                            <div class="online"></div>
                        </div>
                        

                        <-- Use the 'sharing' class name for showing sharing status -->
                        <div class="badge">
                            <img class="avatar" src="../assets/avatars/avatar1.jpg" alt="avatar" />
                            <div class="sharing"></div>
                        </div>


                        <-- Use the 'offline' class name for showing offline status -->
                        <div class="badge">
                            <img class="avatar" src="../assets/avatars/avatar1.jpg" alt="avatar" />
                            <div class="offline"></div>
                        </div>


                        <-- Use the 'busy' class name for showing busy status -->
                        <div class="badge">
                            <img class="avatar" src="../assets/avatars/avatar1.jpg" alt="avatar" />
                            <div class="busy"></div>
                        </div>


                        <-- Use the 'away' class name for showing away status -->
                        <div class="badge">
                            <img class="avatar" src="../assets/avatars/avatar1.jpg" alt="avatar" />
                            <div class="away"></div>
                        </div>

Icon Badge

Icon badges are generally used to display the notification count for a particular component or if a component contains some items it can used to display the count of items present inside that component.

5
99+ 
                    
                        <-- Using the 'badge' class name -->
                        <-- Using 'number' class for showing notification count -->
                        
                        <div class="badge">
                            <img class="avatar icon-badge" src="../assets/chat.svg" alt="chat-icon" />
                            <div class="number online">5</div>
                        </div>

                        <div class="badge">
                            <img class="avatar icon-badge" src="../assets/cart.svg" alt="chat-icon" />
                            <div class="number">5</div>
                        </div>

Pill Badge

Pill badges can be used to display some meta info for something or can be used for tags.

Primary
Secondary
Warning
Danger
Success
                    
                        <-- Using the 'badge' and 'pill' class name for displaying pill badges-->

                        
                        <div class="badge pill">Primary</div>
                        <div class="badge pill pill-secondary">Secondary</div>
                        <div class="badge pill pill-warning">Warning</div>
                        <div class="badge pill pill-danger">Danger</div>
                        <div class="badge pill pill-success">Success</div>
Alert Button