Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info.

Table of content

Default markup

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

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


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

Outline badges

<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>

Pill badges

Use the .badge-pill class if you want to create a badge with rounded corners. Its width will adjust to the label text.

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

Soft color badges

You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click here to see the list of available colors and choose ones that best suit your design.

<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>

Place the badge within an <a> element if you want it to perform the function of a link and make it clickable.

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

Button with badge

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

<button type="button" class="btn">
  Notifications <span class="badge bg-red ms-2">4</span>
<button type="button" class="btn">
  Notifications <span class="badge bg-green ms-2">4</span>
Consider becoming a GitHub Sponsor to support Tabler development and sustainability!
Support the project