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 
                    
<span class="p-rel">Text with a badge
    <span class="badge">5</span>
</span>

Large badge on text

Text with a large badge 5 
                    
<span class="p-rel">Text with a large badge
    <span class="badge badge-large">5</span>
</span>

Badge on button positioned at left

Button with a badge on left - 
                    
<span>Button with a badge on left -
    <button class="btn btn-primary p-rel">Click
        <span class="badge badge-left">5</span>
    </button>
</span>

Badge on icon

5 
                    
<span class="badge-icon p-rel">
    <i class="fas fa-home">
        <span class="badge">5</span></i>
</span>

Badge on avatar

avatar-1 5 
                    
<span class="p-rel d-inline">
    <img class="avatar avatar-sm" src="https://picsum.photos/id/1005/367/267" alt="avatar-1">
    <span class="badge badge-avatar">5</span>
</span>