+ /

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

Rounded badges with size

Badges with dot

Small Medium Large

Badge with remove button

Small Medium 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