Badges can be used for labeling components. Different types of badges are available for different types of labeling.

Default Primary Success Secondary Danger
<span class="badge">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-danger">Danger</span>

Please note that contextual badges can be styled using the following CSS selectors:

  • .badge.badge-* {...} for light mode.
  • .dark-mode .badge.badge-* {...} for dark mode.

This means that something like .badge-primary {...}/.dark-mode .badge-primary {...} is not enough. This is because of how badge styles are structured in Halfmoon.

Pill badges #

The class .badge-pill can be used to create round, pill-like badges.

Default Primary Success Secondary Danger
<!-- Pill badges -->
<span class="badge badge-pill">Default</span>
<span class="badge badge-primary badge-pill">Primary</span>
<span class="badge badge-success badge-pill">Success</span>
<span class="badge badge-secondary badge-pill">Secondary</span>
<span class="badge badge-danger badge-pill">Danger</span>

Badge group # Since v1.1.0+

Badges can also be grouped together by placing them inside a container with the .badge-group class. All types of badges can be used inside badge groups, and the badge group itself can also be a link (a.badge-group).

Default Primary Danger
Success Secondary
downloads 1.2M
<!-- Badge group -->
<span class="badge-group" role="group" aria-label="Badge group example">
  <span class="badge">Default</span>
  <span class="badge badge-primary">Primary</span>
  <span class="badge badge-danger">Danger</span>

<!-- Badge group with pill link badges -->
<span class="badge-group" role="group" aria-label="...">
  <a href="#" class="badge badge-success badge-pill">Success</a>
  <a href="#" class="badge badge-secondary badge-pill">Secondary</a>

<!-- Badge group as link -->
<a href="#" class="badge-group" role="group" aria-label="...">
  <span class="badge bg-dark text-white">downloads</span> <!-- bg-dark = background-color: var(--dark-color), text-white = color: #ffffff --->
  <span class="badge badge-primary">1.2M</span>

Up next: Breadcrumb