Basic Badges
Use the
.badge
&
.bg-*
classes to make badges.
Basic Pill Badges
Use the
.rounded-full
modifier class to make badges more rounded.
Outline Badges
Using the
.border-*
to quickly create a bordered badges.
Outline Pill Badges
Use the
.rounded-full
modifier class to make badges more rounded.
Lighten Badges
Use the background opacity
.bg-*/15
modifier class to make badges lighten.
Lighten Pill Badges
Use the background opacity
.bg-*/15
modifier class to make badges lighten.
Label Badges
Using the
.badge-label
to quickly create a square based badges.
Square Badges
Using the
.size-*
to quickly create a square based badges.
Circle Badges
Using the
.rounded-full
to quickly create a circle based badges.
Positioned
Use utilities to modify a
.badge
and position it in the corner of a link or button.