Badges

Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info.

The default badges are square and come in the basic set of colors.

You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle.

Use the outline prop if you want to remove the color and the background of your badge and give it a more subtle look.

Use the ghost prop to make your badge look simple yet aesthetically appealing.

Use the shape prop to change your badge shape.

Badges can be used as part of heading element.

Use the dot prop if you want to create a badge with rounded corners. Its width will adjust to the label text.

Place the link at badge href prop if you want it to perform the function of a link and make it clickable.

Badges can be used as part of links or buttons to provide a counter.