Badge

Badge component is used to show notifications. These are positioned at the top right or top left of parent component. A very common use case that we see in daily life is that of number of notifications on your app/messages/cart items & many more. Check out the several variants below.

Badge on text

Text with a badge 5
                    
Text with a badge
    5

                    
                

Large badge on text

Text with a large badge 5
                    
Text with a large badge
    5

                    
                

Badge on button positioned at left

Button with a badge on left -
                    
Button with a badge on left -
    

                    
                

Badge on icon

5
                    

    
        5

                    
                

Badge on avatar

avatar-1 5
                    

    avatar-1
    5