---
title: Badge
summary: A badge is a small label for a count, a status or a tag. It comes in colors, light styles, pills, dots and notification badges.
description: Add badges to show counts, labels, or statuses. Use colors, pill styles, links, and notification dots to add context.
related: [/ui/components/status, /ui/components/tag]
source: core/scss/ui/_badges.scss
css-vars: badge
classnames:
  component:
    - class: badge
      desc: Container element
  part:
    - class: badge-dot
      desc: Small dot with no text, for a status marker
    - class: badge-icononly
      desc: Square badge holding only an icon
    - class: badge-notification
      desc: Positions the badge over the corner of its parent
    - class: badge-list
      desc: Wrapper that spaces several badges in a row
  modifier:
    - class: badge-pill
      desc: Fully rounded ends
  behavior:
    - class: badge-blink
      desc: Pulsing animation, for a live counter
  color:
    - class: bg-{color}
      desc: Any base color, for example bg-green or bg-red
  size:
    - class: badge-sm
      desc: Small size
    - class: badge-lg
      desc: Large size
---
import BadgeList from '@ui/BadgeList.astro';
import Example from '@components/Example.astro';
import Badge from '@ui/Badge.astro';
import site from '@data/site.json';

export const colors = Object.entries(site.colors);

## Default markup

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

<Example centered>
<BadgeList>{colors.map(([key, val]) => <Badge color={key} text={val.title} />)}</BadgeList>
</Example>

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

```html
<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>
<h1>Example heading <Badge text="New" /></h1>
<h2>Example heading <Badge text="New" /></h2>
<h3>Example heading <Badge text="New" /></h3>
<h4>Example heading <Badge text="New" /></h4>
<h5>Example heading <Badge text="New" /></h5>
<h6>Example heading <Badge text="New" /></h6>
</Example>

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

<Example centered>
<BadgeList>{colors.map(([key, val]) => <Badge color={key} text={val.title} light />)}</BadgeList>
</Example>

## Pill badges

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

<Example centered>
<BadgeList>{colors.map(([key, val]) => <Badge color={key} text={val.title} class="badge-pill" />)}</BadgeList>
</Example>

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

<Example centered>
<BadgeList>{colors.map(([key, val], i) => <Badge color={key} text={String(i + 1)} class="badge-pill" />)}</BadgeList>
</Example>

## Badges with icons

A badge can hold an [icon](/ui/components/icon) in front of the text.

<Example centered>
<BadgeList>
  <Badge text="Star" icon="star" />
  <Badge text="Heart" icon="heart" />
  <Badge text="Check" icon="check" />
  <Badge text="X" icon="x" />
  <Badge text="Plus" icon="plus" />
  <Badge text="Minus" icon="minus" />
</BadgeList>
</Example>

The icon can also go after the text.

<Example centered>
<BadgeList>
  <Badge text="Star" iconEnd="arrow-right" />
  <Badge text="Heart" iconEnd="arrow-right" />
  <Badge text="Check" iconEnd="arrow-right" />
  <Badge text="X" iconEnd="arrow-right" />
  <Badge text="Plus" iconEnd="arrow-right" />
  <Badge text="Minus" iconEnd="arrow-right" />
</BadgeList>
</Example>

## Links

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

<Example centered>
<BadgeList>
  <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>
</BadgeList>
</Example>

## Button with badge

A badge inside a [button](/ui/components/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.

<Example centered>
<div class="btn-list">
  <button type="button" class="btn">Notifications <Badge text="2" color="red" class="ms-2" /></button>
  <button type="button" class="btn">Inbox <Badge text="4" color="red" class="badge-notification" /></button>
  <button type="button" class="btn">Profile <Badge text="" color="red" class="badge-notification" /></button>
</div>
</Example>

## Animated badges

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

<Example centered>
<button type="button" class="btn">Profile <Badge text="" color="red" class="badge-notification badge-blink" /></button>
</Example>

## Size options

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

<Example centered vertical>
<BadgeList>
  <Badge color="primary" size="sm" text="New" />
  <Badge color="primary" size="sm" text="1" class="badge-pill" />
</BadgeList>
<BadgeList>
  <Badge color="primary" text="New" />
  <Badge color="primary" text="1" class="badge-pill" />
</BadgeList>
<BadgeList>
  <Badge color="primary" size="lg" text="New" />
  <Badge color="primary" size="lg" text="1" class="badge-pill" />
</BadgeList>
</Example>

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

<Example centered>
<BadgeList>
  <span class="badge badge-dot bg-green"></span>
  <span class="badge badge-dot bg-yellow"></span>
  <span class="badge badge-dot bg-red"></span>
</BadgeList>
</Example>

## Icon-only badges

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

<Example centered>
<BadgeList>
  <Badge color="primary" class="badge-icononly" icon="star" />
  <Badge color="green" class="badge-icononly" icon="check" />
  <Badge color="red" class="badge-icononly" icon="x" />
</BadgeList>
</Example>

## 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](/ui/components/status) do.

## More examples

More examples are in the [Bootstrap documentation](https://getbootstrap.com/docs/5.3/components/badge/) and on the Tabler [Badges](https://preview.tabler.io/badges.html) preview page.