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
<span class="badge-icon p-rel">
<i class="fas fa-home">
<span class="badge">5</span></i>
</span>
Badge on avatar
<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>