Example

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Headings

<h1>Example heading <span class="badge">New</span></h1>
<h2>Example heading <span class="badge">New</span></h2>
<h3>Example heading <span class="badge">New</span></h3>
<h4>Example heading <span class="badge">New</span></h4>
<h5>Example heading <span class="badge">New</span></h5>
<h6>Example heading <span class="badge">New</span></h6>

Buttons

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

<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-light text-dark">4</span>
</button>

Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.

Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text.

<button type="button" class="btn btn-primary">
  Profile <span class="badge bg-danger">9</span>
  <span class="sr-only">unread messages</span>
</button>

Positioned

Use utilities to modify a .badge and position it in the corner of a link or button.

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge radius-pill bg-danger">
    99+
    <span class="sr-only">unread messages</span>
  </span>
</button>

You can also replace the .badge class with a few more utilities without a count for a more generic indicator.

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-0_5 bg-warning border border-white radius-circle">
    <span class="sr-only">New alerts</span>
  </span>
</button>

Contextual Variations

Use our background and text color utility classes to quckly change the appearance of a badge.

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-warning text-body">Warning</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

Outline Badges

Since badges have a transparent border by default, it is easy to create outline badges with the addition of border color utility classes, in combination with the background and text color utilities.

<span class="badge bg-transparent border-primary text-primary">Primary</span>
<span class="badge bg-transparent border-secondary text-secondary">Secondary</span>
<span class="badge bg-transparent border-success text-success">Success</span>
<span class="badge bg-transparent border-info text-info">Info</span>
<span class="badge bg-transparent border-warning text-warning">Warning</span>
<span class="badge bg-transparent border-danger text-danger">Danger</span>
<span class="badge bg-transparent border-light text-light">Light</span>
<span class="badge bg-transparent border-dark text-dark">Dark</span>

Pill Badges

Use the .radius-pill utility class to make badges more rounded.

<span class="badge radius-pill bg-primary">Primary</span>
<span class="badge radius-pill bg-secondary">Secondary</span>
<span class="badge radius-pill bg-success">Success</span>
<span class="badge radius-pill bg-info">Info</span>
<span class="badge radius-pill bg-warning text-body">Warning</span>
<span class="badge radius-pill bg-danger">Danger</span>
<span class="badge radius-pill bg-light text-dark">Light</span>
<span class="badge radius-pill bg-dark">Dark</span>

<span class="badge radius-pill bg-transparent border-primary text-primary">Primary</span>
<span class="badge radius-pill bg-transparent border-secondary text-secondary">Secondary</span>
<span class="badge radius-pill bg-transparent border-success text-success">Success</span>
<span class="badge radius-pill bg-transparent border-info text-info">Info</span>
<span class="badge radius-pill bg-transparent border-warning text-warning">Warning</span>
<span class="badge radius-pill bg-transparent border-danger text-danger">Danger</span>
<span class="badge radius-pill bg-transparent border-light text-light">Light</span>
<span class="badge radius-pill bg-transparent border-dark text-dark">Dark</span>

Close Icon

Create "dismissable" badges by adding the .close icon within a badge. Note that <button> and <a> elements are not supported within another <a>.

<span class="badge bg-primary">
  Dismissable badge
  <button type="button" class="close" aria-label="Dismiss">
    <span aria-hidden="true">&times;</span>
  </button>
</span>

<span class="badge radius-pill bg-success">
  Dismissable badge
  <button type="button" class="close" aria-label="Dismiss">
    <span aria-hidden="true">&times;</span>
  </button>
</span>

JavaScript Integration

Currently, no specific JavaScript is included with Figuration to do the dismissing for you, so it may be more beneficial to write your own to implement any desired behaviors.

However, you can use the Alert widget with a target option as a quick implementation.

<span class="badge bg-info" id="alert-badge">
  Dismissable badge
  <button type="button" class="close" aria-label="Dismiss" data-cfw-dismiss="alert" data-cfw-alert-target="#alert-badge">
    <span aria-hidden="true">&times;</span>
  </button>
</span>

Badge Group

Group badges together using .badge-group.

<div class="badge-group me-1">
  <span class="badge bg-dark">version</span>
  <span class="badge bg-success">v4.4.1</span>
</div>

<div class="badge-group me-1">
  <span class="badge bg-dark">build</span>
  <span class="badge bg-danger">error</span>
</div>

<div class="badge-group me-1">
  <span class="badge radius-pill radius-e-0 bg-dark">response</span>
  <span class="badge radius-pill radius-s-0 bg-light text-dark">none</span>
</div>

<div class="badge-group">
  <span class="badge bg-primary">comments</span>
  <span class="badge bg-white border-primary text-primary">9</span>
</div>

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for the badge component.

Mixins

No mixins available.