Components

Badges

Documentation and examples for badges, our small count and labeling component.

On this page

Examples#

Badges are small pill-shaped labels and counters. Unlike Bootstrap's, felt-css badges have a fixed size (.75rem) and don't scale with the parent element. Like in Bootstrap 5, badges have no focus or hover styles for links.

Headings#

Example heading New

<h1>Example heading <span class="badge text-bg-secondary">New</span></h1>
<h2>Example heading <span class="badge text-bg-secondary">New</span></h2>
<h3>Example heading <span class="badge text-bg-secondary">New</span></h3>
<h4>Example heading <span class="badge text-bg-secondary">New</span></h4>
<h5>Example heading <span class="badge text-bg-secondary">New</span></h5>
<h6>Example heading <span class="badge text-bg-secondary">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 text-bg-secondary">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. 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.

Positioned#

Use utilities to modify a .badge and position it in the corner of a link or button. A felt-css badge has no light text by default, so pair a background color with its text color via .text-bg-*.

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">
    99+
    <span class="visually-hidden">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-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

Background colors#

Set a background-color with contrasting foreground color with the .text-bg-{color} helpers. Pairing .text-{color} and .bg-{color} utilities works too.

Primary Secondary Success Danger Warning Info Light Dark

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

Conveying meaning to assistive technologies. Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Make sure the meaning is obvious from the content itself, or is included through alternative means such as additional text hidden with the .visually-hidden class.

In the felt look a coloured badge is a small patch: saturated felt with a cut edge and a soft shadow, but no seam.

Pill badges#

felt-css badges are always pills, so .rounded-pill changes nothing on them; it's kept here so Bootstrap markup works unchanged. For a squarer badge, use a .rounded-* utility such as .rounded-2.

Primary Secondary Success Danger Warning Info Light Dark

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