Sections

Badges

Badges offer a simple and convenient way of labelling elements.

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:

Article title Promoted

Article title Promoted

Article title Promoted

<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:

New Open Answered Hold Solved Closed
<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:

New Open Answered Hold Solved Closed
<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);
}