Badges

Easily highlight new or unread items by adding a <span class="badge"> to links, buttons, and more.


Inbox 42

Labels

Add various labels to your content

Heading 1 New

Heading 2 New

Heading 3 New

Heading 4 New

Heading 5 New
Heading 6 New

Available variations

Add any of the below mentioned modifier classes to change the appearance of a label.

DarkPrimaryDelugeSuccessWarningDangerInfo

Pill Badges

Use the .badge-pill modifier class to make badges more rounded.

DarkPrimaryDelugeSuccessWarningDangerInfo

Links

Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.