Badge

A badge is a small label for a count, a status or a tag. It comes in colors, light and outline styles, pills, dots and notification badges.

Default markup

The default badges are square and come in the basic set of colors.

BlueAzureIndigoPurplePinkRedOrangeYellowLimeGreenTealCyan
<div class="badge-list">
  <span class="badge bg-blue text-blue-fg">Blue</span>
  <span class="badge bg-azure text-azure-fg">Azure</span>
  <span class="badge bg-indigo text-indigo-fg">Indigo</span>
  <span class="badge bg-purple text-purple-fg">Purple</span>
  <span class="badge bg-pink text-pink-fg">Pink</span>
  <span class="badge bg-red text-red-fg">Red</span>
  <span class="badge bg-orange text-orange-fg">Orange</span>
  <span class="badge bg-yellow text-yellow-fg">Yellow</span>
  <span class="badge bg-lime text-lime-fg">Lime</span>
  <span class="badge bg-green text-green-fg">Green</span>
  <span class="badge bg-teal text-teal-fg">Teal</span>
  <span class="badge bg-cyan text-cyan-fg">Cyan</span>
</div>

Badge list

Use the .badge-list container whenever you show more than one badge next to each other. It keeps consistent spacing between items and wraps them when there is not enough space.

<div class="badge-list">
  <span class="badge">First</span>
  <span class="badge">Second</span>
</div>

Headings

A badge scales with the heading it sits in, from <h1> to <h6>, so it can mark a section as new or in beta.

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>

Light versions of badges

The -lt classes give a badge a light tint instead of a solid fill.

For example you can use the bg-blue-lt class to create a light blue badge. The class also sets the text color, so the label stays readable on the tint.

BlueAzureIndigoPurplePinkRedOrangeYellowLimeGreenTealCyan
<div class="badge-list">
  <span class="badge bg-blue-lt">Blue</span>
  <span class="badge bg-azure-lt">Azure</span>
  <span class="badge bg-indigo-lt">Indigo</span>
  <span class="badge bg-purple-lt">Purple</span>
  <span class="badge bg-pink-lt">Pink</span>
  <span class="badge bg-red-lt">Red</span>
  <span class="badge bg-orange-lt">Orange</span>
  <span class="badge bg-yellow-lt">Yellow</span>
  <span class="badge bg-lime-lt">Lime</span>
  <span class="badge bg-green-lt">Green</span>
  <span class="badge bg-teal-lt">Teal</span>
  <span class="badge bg-cyan-lt">Cyan</span>
</div>

Pill badges

The .badge-pill class gives a badge fully rounded ends. Its width follows the label.

BlueAzureIndigoPurplePinkRedOrangeYellowLimeGreenTealCyan
<div class="badge-list">
  <span class="badge bg-blue text-blue-fg badge-pill">Blue</span>
  <span class="badge bg-azure text-azure-fg badge-pill">Azure</span>
  <span class="badge bg-indigo text-indigo-fg badge-pill">Indigo</span>
  <span class="badge bg-purple text-purple-fg badge-pill">Purple</span>
  <span class="badge bg-pink text-pink-fg badge-pill">Pink</span>
  <span class="badge bg-red text-red-fg badge-pill">Red</span>
  <span class="badge bg-orange text-orange-fg badge-pill">Orange</span>
  <span class="badge bg-yellow text-yellow-fg badge-pill">Yellow</span>
  <span class="badge bg-lime text-lime-fg badge-pill">Lime</span>
  <span class="badge bg-green text-green-fg badge-pill">Green</span>
  <span class="badge bg-teal text-teal-fg badge-pill">Teal</span>
  <span class="badge bg-cyan text-cyan-fg badge-pill">Cyan</span>
</div>

A pill with a number works as a counter, for example for unread messages.

123456789101112
<div class="badge-list">
  <span class="badge bg-blue text-blue-fg badge-pill">1</span>
  <span class="badge bg-azure text-azure-fg badge-pill">2</span>
  <span class="badge bg-indigo text-indigo-fg badge-pill">3</span>
  <span class="badge bg-purple text-purple-fg badge-pill">4</span>
  <span class="badge bg-pink text-pink-fg badge-pill">5</span>
  <span class="badge bg-red text-red-fg badge-pill">6</span>
  <span class="badge bg-orange text-orange-fg badge-pill">7</span>
  <span class="badge bg-yellow text-yellow-fg badge-pill">8</span>
  <span class="badge bg-lime text-lime-fg badge-pill">9</span>
  <span class="badge bg-green text-green-fg badge-pill">10</span>
  <span class="badge bg-teal text-teal-fg badge-pill">11</span>
  <span class="badge bg-cyan text-cyan-fg badge-pill">12</span>
</div>

Badges with icons

A badge can hold an icon in front of the text.

Star Heart Check X Plus Minus
<div class="badge-list">
  <span class="badge">
    <!-- Download SVG icon from http://tabler.io/icons/icon/star -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245" />
    </svg>Star
  </span>
  <span class="badge">
    <!-- Download SVG icon from http://tabler.io/icons/icon/heart -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
    </svg>Heart
  </span>
  <span class="badge">
    <!-- Download SVG icon from http://tabler.io/icons/icon/check -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M5 12l5 5l10 -10" />
    </svg>Check
  </span>
  <span class="badge">
    <!-- Download SVG icon from http://tabler.io/icons/icon/x -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M18 6l-12 12" />
      <path d="M6 6l12 12" />
    </svg>X
  </span>
  <span class="badge">
    <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M12 5l0 14" />
      <path d="M5 12l14 0" />
    </svg>Plus
  </span>
  <span class="badge">
    <!-- Download SVG icon from http://tabler.io/icons/icon/minus -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M5 12l14 0" />
    </svg>Minus
  </span>
</div>

The icon can also go after the text.

Star Heart Check X Plus Minus 
<div class="badge-list">
  <span class="badge">Star<!-- Download SVG icon from http://tabler.io/icons/icon/arrow-right -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M5 12l14 0" />
      <path d="M13 18l6 -6" />
      <path d="M13 6l6 6" />
    </svg>
  </span>
  <span class="badge">Heart<!-- Download SVG icon from http://tabler.io/icons/icon/arrow-right -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M5 12l14 0" />
      <path d="M13 18l6 -6" />
      <path d="M13 6l6 6" />
    </svg>
  </span>
  <span class="badge">Check<!-- Download SVG icon from http://tabler.io/icons/icon/arrow-right -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M5 12l14 0" />
      <path d="M13 18l6 -6" />
      <path d="M13 6l6 6" />
    </svg>
  </span>
  <span class="badge">X<!-- Download SVG icon from http://tabler.io/icons/icon/arrow-right -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M5 12l14 0" />
      <path d="M13 18l6 -6" />
      <path d="M13 6l6 6" />
    </svg>
  </span>
  <span class="badge">Plus<!-- Download SVG icon from http://tabler.io/icons/icon/arrow-right -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M5 12l14 0" />
      <path d="M13 18l6 -6" />
      <path d="M13 6l6 6" />
    </svg>
  </span>
  <span class="badge">Minus<!-- Download SVG icon from http://tabler.io/icons/icon/arrow-right -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M5 12l14 0" />
      <path d="M13 18l6 -6" />
      <path d="M13 6l6 6" />
    </svg>
  </span>
</div>

Put the badge classes on an <a> element to make the badge a link.

BlueAzureIndigoPurplePinkRedOrangeYellowLimeGreenTealCyan
<div class="badge-list">
  <a href="#" class="badge bg-blue-lt">Blue</a>
  <a href="#" class="badge bg-azure-lt">Azure</a>
  <a href="#" class="badge bg-indigo-lt">Indigo</a>
  <a href="#" class="badge bg-purple-lt">Purple</a>
  <a href="#" class="badge bg-pink-lt">Pink</a>
  <a href="#" class="badge bg-red-lt">Red</a>
  <a href="#" class="badge bg-orange-lt">Orange</a>
  <a href="#" class="badge bg-yellow-lt">Yellow</a>
  <a href="#" class="badge bg-lime-lt">Lime</a>
  <a href="#" class="badge bg-green-lt">Green</a>
  <a href="#" class="badge bg-teal-lt">Teal</a>
  <a href="#" class="badge bg-cyan-lt">Cyan</a>
</div>

Button with badge

A badge inside a button or a link works as a counter. Add the .badge-notification class to pin it to the top right corner of the control.

A notification badge with no text is a small dot, which is enough to say that something is new.

<div class="btn-list">
  <button type="button" class="btn">Notifications <span class="badge bg-red text-red-fg ms-2">2</span>
  </button>
  <button type="button" class="btn">Inbox <span class="badge bg-red text-red-fg badge-notification">4</span>
  </button>
  <button type="button" class="btn">Profile <span class="badge bg-red text-red-fg badge-notification"></span>
  </button>
</div>

Animated badges

The .badge-blink class makes a badge blink with a CSS animation, for a live status or something the user must notice.

<button type="button" class="btn">Profile <span class="badge bg-red text-red-fg badge-notification badge-blink"></span>
</button>

Size options

Use .badge-sm or .badge-lg to change the size. The examples above use the default.

New1
New1
New1
<div class="badge-list">
  <span class="badge badge-sm bg-primary text-primary-fg">New</span>
  <span class="badge badge-sm bg-primary text-primary-fg badge-pill">1</span>
</div>
<div class="badge-list">
  <span class="badge bg-primary text-primary-fg">New</span>
  <span class="badge bg-primary text-primary-fg badge-pill">1</span>
</div>
<div class="badge-list">
  <span class="badge badge-lg bg-primary text-primary-fg">New</span>
  <span class="badge badge-lg bg-primary text-primary-fg badge-pill">1</span>
</div>

Outline badges

Use .badge-outline for a badge with a border and no fill. Add a text-* class to set its color - the border follows the text.

blueazureindigopurplepinkredorangeyellowlimegreentealcyan
<div class="badge-list">
  <span class="badge badge-outline text-blue">blue</span>
  <span class="badge badge-outline text-azure">azure</span>
  <span class="badge badge-outline text-indigo">indigo</span>
  <span class="badge badge-outline text-purple">purple</span>
  <span class="badge badge-outline text-pink">pink</span>
  <span class="badge badge-outline text-red">red</span>
  <span class="badge badge-outline text-orange">orange</span>
  <span class="badge badge-outline text-yellow">yellow</span>
  <span class="badge badge-outline text-lime">lime</span>
  <span class="badge badge-outline text-green">green</span>
  <span class="badge badge-outline text-teal">teal</span>
  <span class="badge badge-outline text-cyan">cyan</span>
</div>

Dot badges

Use .badge-dot for a small dot with no text. It marks a state next to a label, so always keep that label readable next to it.

<div class="badge-list">
  <span class="badge badge-dot bg-green"></span>
  <span class="badge badge-dot bg-yellow"></span>
  <span class="badge badge-dot bg-red"></span>
</div>

Icon-only badges

Use .badge-icononly when the badge holds nothing but an icon. It removes the horizontal padding, so the icon stays centered.

<div class="badge-list">
  <span class="badge bg-primary text-primary-fg badge-icononly">
    <!-- Download SVG icon from http://tabler.io/icons/icon/star -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245" />
    </svg>
  </span>
  <span class="badge bg-green text-green-fg badge-icononly">
    <!-- Download SVG icon from http://tabler.io/icons/icon/check -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M5 12l5 5l10 -10" />
    </svg>
  </span>
  <span class="badge bg-red text-red-fg badge-icononly">
    <!-- Download SVG icon from http://tabler.io/icons/icon/x -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M18 6l-12 12" />
      <path d="M6 6l12 12" />
    </svg>
  </span>
</div>

Accessibility

A badge is text, not a control, so most of the work is in the words you put in it.

  • A badge that only shows a color, such as .badge-dot or an empty notification badge, means nothing to a screen reader. Put the state in text next to it, or add an aria-label to the element it describes.
  • Write counts so they make sense on their own: 4 unread messages reads better than a bare 4. Keep the short version visible and the full version in an aria-label when space is tight.
  • A badge inside a button or a link is part of that control's name. Check how the whole control reads out loud before shortening the text.
  • Color alone should never carry the meaning. Pair it with a word or an icon, the same way statuses do.

More examples

More examples are in the Bootstrap documentation and on the Tabler Badges preview page.

SCSS variables

Use these SCSS variables to customize badges. The default values are:

$badge-font-size: $font-size-reative-sm;
$badge-font-size-sm: $font-size-reative-xs;
$badge-font-size-lg: $font-size-reative-md;
$badge-font-weight: var(--font-weight-medium);
$badge-padding-y: 0.25em;
$badge-padding-x: 0.5em;
$badge-border-radius: var(--border-radius);
$badge-empty-size: 0.5rem;
$badge-color: var(--secondary);
$badge-bg-color: var(--bg-surface-secondary);
$badge-gap: 0.25rem;
$badge-padding-x-sm: 0.25rem;
$badge-padding-y-lg: 0.25rem;
$badge-padding-x-lg: 0.5rem;

Class reference

Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.

badge componentContainer element
badge-dot partSmall dot with no text, for a status marker
badge-icononly partSquare badge holding only an icon
badge-notification partPositions the badge over the corner of its parent
badge-list partWrapper that spaces several badges in a row
badge-outline styleTransparent fill with a colored border
badge-pill modifierFully rounded ends
badge-blink behaviorPulsing animation, for a live counter
bg-{color} colorAny base color, for example bg-green or bg-red
badge-sm sizeSmall size
badge-lg sizeLarge size
Status

Highlight the state of an element with a small status badge. Add colors, dots, and animations to make statuses easy to scan.

Tag

Build inline tag elements with the tag class API and related tag part classes.

On this page

130 sleek illustrations for your startup's visual identity.