BADGE

Badges are used to display status or notifications. It can be used with text, images, or icons to grab user's attention.

Basic Badge

There are 6 variations of basic badges that can be used in different context.

You just need to add a class badge to wrap the text as a basic badge.

You can also add class for different variations of basic badges like badge-primary , badge-green , badge-red , badge-yellow and badge-light .

Code Example :

Example of heading with basic badge SOLD

Example of heading with primary badge TRENDING

Example of heading with green badge NEW

Example of heading with red badge SALE
Example of heading with yellow badge BEST SELLER

Example of paragraph with light badge COMING SOON

Badge on Avatars

You can add status badge to an avatar for displaying the status of the user.

Check the code below to add a status badge on your avatar.

Code Example :
avatar
avatar
avatar
avatar
avatar

Badge on Icons

Badges can also be used to display the count of notifications, messages or cart items to gran user's attention.

You can check the below code for making a badge icon component.

Code Example :
9 10+ 2