Simple Badges

Heading 01 New

Heading 02 New

Heading 03 New

Heading 04 New

Heading 05 New
Heading 06 New

Colored Badges

Heading 01 New

Heading 02 New

Heading 03 New

Heading 04 New

Heading 05 New
Heading 06 New

Contextual variations

Default Primary Success Info Warning Danger

Pill Badges

Default Primary Success Info Warning Danger
top

Default badge

And a little description.
and so one

top

Success badge

And a little description.
and so one

top

Primary badge

And a little description.
and so one

top

Info Badge

And a little description.
and so one

top

Warning badge

And a little description.
and so one

top

Danger Badge

And a little description.
and so one

Buttons with Badges

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

Buttons with Rounded Badges

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