Badges

On this page

# Intro

Badges can be created by using the badge class along with a data-badge attribute.

BadgeBadgeBadge
<span class="badge">Badge</span>
<span class="badge" data-badge="99">Badge</span>
<span class="badge" data-badge="NEW">Badge</span>

# Colors

The badge class has color modifiers available with -badge-primary, -badge-success, -badge-warning, -badge-danger, -badge-dark, and -badge-light. The color modifiers are named differently since they can collide with other color modifiers.

PrimarySuccessWarningDangerDarkLight
<span class="badge -badge-primary" data-badge="99">Primary</span>

# Buttons

Badges work with buttons and will not collide with other color modifiers.

<button class="-primary -outline badge -badge-danger" data-badge="5">Primary Button</button>
<button class="-primary badge -badge-danger" data-badge="5">Primary Button</button>