Usage
Badges scale to match the size of the immediate parent element by using relative font sizing and em units.
Use .badge to create a badge:
<h1 class="my-4">
Article title
<span class="badge align-middle">Promoted</span>
</h1>
<h2 class="my-4">
Article title
<span class="badge align-middle">Promoted</span>
</h2>
<h3 class="my-4">
Article title
<span class="badge align-middle">Promoted</span>
</h3>Use .badge-* modifier classes to change the appearance of a badge:
<span class="badge badge-new">New</span>
<span class="badge badge-open">Open</span>
<span class="badge badge-answered">Answered</span>
<span class="badge badge-hold">Hold</span>
<span class="badge badge-solved">Solved</span>
<span class="badge badge-closed">Closed</span>Use .rounded and .px-2 utilities to make badges rounded:
<span class="badge badge-new rounded px-2">New</span>
<span class="badge badge-open rounded px-2">Open</span>
<span class="badge badge-answered rounded px-2">Answered</span>
<span class="badge badge-hold rounded px-2">Hold</span>
<span class="badge badge-solved rounded px-2">Solved</span>
<span class="badge badge-closed rounded px-2">Closed</span>Use contextual .badge-* classes on a <a> element to create actionable badges with hover and focus states.
<a href="#" class="badge badge-new">New</a>
<a href="#" class="badge badge-open">Open</a>
<a href="#" class="badge badge-answered">Answered</a>
<a href="#" class="badge badge-hold">Hold</a>
<a href="#" class="badge badge-solved">Solved</a>
<a href="#" class="badge badge-closed">Closed</a>Badges can be used as part of links or buttons to provide a counter.
<button type="button" class="button button-primary">
Profile <span class="badge badge-white ml-1">9</span>
<span class="sr-only">unread messages</span>
</button>Variants
Use the badge-variant Sass mixin to create your own badge variants.
For example, the following Sass code creates a new purple badge (.badge-purple):
.badge-purple {
@include badge-variant(#4329d4);
}