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.

Default markup

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

Headings

Outline badges

Pill badges

Use the .badge-pill class if you want to create a badge with rounded corners. Its width will adjust to the label text.

Links

Place the badge within an <a> element if you want it to perform the function of a link and make it clickable.

Button with badge

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

<button type="button" class="btn">
  Notifications <span class="badge bg-red-lt ms-2">4</span>
</button>

The results can be seen in the example below.