Badges
Default
Primary Success Info Warning Danger Dark
Soft Badge
Primary Success Info Warning Danger Dark
Rounded ( Pill ) Badges
Default
Primary Success Info Warning Danger Dark
Soft Badge
Primary Success Info Warning Danger Dark
Badge with dot
Default
Primary Success Info Warning Danger Dark
Rounded Badge
Primary Success Info Warning Danger Dark
Rounded badges with size
Badges with dot
Small Large Small Large Small Large Small Large
Badge with remove button
Small Large Small Large Small Large Small Large
Badges in Buttons
Badges Position Examples
Badges with Heading

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Example heading Primary

Example heading Success

Example heading Info

Example heading Warning

Example heading Danger
Example heading Dark