v4 Beta now available! Try it out! Feedback welcome!
Looking for v3 docs?

Badges

Small and adaptive badges for adding context to just about any content.

Page Contents

Example #

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

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
<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>

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>

Contextual Variations #

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

Conveying Meaning to Assistive Technologies

Please refer to the Accessiblity notes about conveying meaning with color.

Primary Secondary Success Info Warning Danger Light Dark
<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.

Primary Secondary Success Info Warning Danger Light Dark
<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.

Primary Secondary Success Info Warning Danger Light Dark
<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>
Primary Secondary Success Info Warning Danger Light Dark
<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>.

Dismissable badge Dismissable badge
<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.

Dismissable badge
<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.

version v4.0.0
build error
response none
comments 9
<div class="badge-group me-1">
<span class="badge bg-dark">version</span>
<span class="badge bg-success">v4.0.0</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.

Name Type Default Description
$enable-badge boolean true Enable the generation of the badge component classes. Smaller segements of the badge component classes can be disabled with the following $enable-* variables.
$enable-badge-close boolean true Enable the generation of the badge close button rule.
$enable-badge-group boolean true Enable the generation of the badge group variant.
$badge-bg string $uibase-500 Badge default background color.
$badge-color string $white Badge default text color.
$badge-font-family string null Badge font family.
$badge-font-size string .75em Badge font size.
$badge-font-weight string $font-weight-bold Badge font weight.
$badge-line-height string 1 Badge line height.
$badge-padding-y string .25em Badge vertical padding.
$badge-padding-x string .4375em Badge horizontal padding.
$badge-border-width string $border-width Badge border width.
$badge-border-radius string .25em Badge border radius.
$badge-close-padding-x string .375em Badge close button horizontal padding.
$badge-close-font-size string 1.25em Badge close button font size.

Mixins #

No mixins available.