Loading...

Badge

Buttons

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

Positioned

Use utilities to modify a .badge and position it in the corner of a link or button.

You can also replace the .badge class with a few more utilities without a count for a more generic indicator.

Background colors

Set a background-color with contrasting foreground color.

Primary Success Danger Warning Info Dark

Pill badges

Use the .rounded-pill utility class to make badges more rounded with a larger border-radius.

Primary Success Danger Warning Info Dark