Basic
Solid
Use variant property to apply contextual colors
Primary Secondary Success Info Warning Danger Dark Light
Outline
Fill variant property with outline-(color) to apply these variants
Primary Secondary Success Info Warning Danger Dark Light
Label
Fill variant property with label-(color) to apply these variants
Primary Secondary Success Info Warning Danger Dark Light
Text
Fill variant property with text-(color) to apply these variants
Primary Secondary Success Info Warning Danger Dark Light
Sizing
Change your badges size by setting size property with lg|xl values.
Primary Secondary Success Info Warning Danger
Primary Secondary Success Info Warning Danger
Primary Secondary Success Info Warning Danger
Shaped badges
Make your badge into a circle or square shape by setting shape property with circle|square values.
Circle
A B C D E F
Square
A B C D E F
Links
Pill badges
Add pill prooperty to make badge element more rounded.
Primary Secondary Success Info Warning Danger Dark Light