Badges

Badges are small indicators used to display counts, statuses, or labels. They add quick context to elements like buttons, icons, or lists.

Basic badges

Neutral Neutral Neutral

HTML

<span class="badge">Neutral</span>
<span class="badge badge-subtle">Neutral</span>
<span class="badge badge-outline">Neutral</span>

Notification badge

Badges can be positioned on the corner of links, buttons, or other elements using utility classes for placement.

HTML

<button class="btn btn-circle btn-subtle-neutral relative">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 19v-9a6 6 0 0 1 6-6v0a6 6 0 0 1 6 6v9M6 19h12M6 19H4m14 0h2m-9 3h2"/><circle cx="12" cy="3" r="1"/></g></svg>
  <span class="absolute badge badge-danger top-0 right-0 translate-middle p-1 border border-white"></span>
</button>

HTML

<button type="button" class="btn btn-primary relative">Profile
  <span class="absolute badge badge-danger -top-2 -right-2 translate-middle p-2 border border-white">
  </span>
</button>

Headings

Example heading New

HTML

<h3>Example heading <span class="badge badge-primary">New</span></h3>

variants

Badges support multiple styles, including solid, subtle, and outlined. Each variant can use different colors to represent various states or categories.

Primary Secondary Info
Primary Secondary Info
Primary Secondary Info

HTML

<div class='flex gap-2'>
  <span class="badge badge-primary">Primary</span>
  <span class="badge badge-secondary">Secondary</span>
  <span class="badge badge-info">Info</span>
</div>
<div class='flex gap-2'>
  <span class="badge badge-subtle-primary">Primary</span>
  <span class="badge badge-subtle-secondary">Secondary</span>
  <span class="badge badge-subtle-info">Info</span>
</div>
<div class='flex gap-2'>
  <span class="badge badge-outline-primary">Primary</span>
  <span class="badge badge-outline-secondary">Secondary</span>
  <span class="badge badge-outline-info">Info</span>
</div>

Sizes

For larger or medium badge, use the .badge-md and .badge-lg class. Default is small.

Primary Primary Primary
Primary Primary Primary
Primary Primary Primary

HTML

<div class='flex items-center gap-2'>
  <span class="badge badge-primary">Primary</span>
  <span class="badge badge-primary badge-md">Primary</span>
  <span class="badge badge-primary badge-lg">Primary</span>
</div>
<div class='flex items-center gap-2'>
  <span class="badge badge-subtle-primary">Primary</span>
  <span class="badge badge-subtle-primary badge-md">Primary</span>
  <span class="badge badge-subtle-primary badge-lg">Primary</span>
</div>
<div class='flex items-center gap-2'>
  <span class="badge badge-outline-primary">Primary</span>
  <span class="badge badge-outline-primary badge-md">Primary</span>
  <span class="badge badge-outline-primary badge-lg">Primary</span>
</div>

Badge with icon

With Icon
With Icon
With Icon

HTML

<div class="badge badge-primary badge-md">
  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0"/><path d="M9 10a3 3 0 1 0 6 0a3 3 0 1 0-6 0m-2.832 8.849A4 4 0 0 1 10 16h4a4 4 0 0 1 3.834 2.855"/></g></svg>
  With Icon
</div>
<div class="badge badge-subtle-primary badge-md">
  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0"/><path d="M9 10a3 3 0 1 0 6 0a3 3 0 1 0-6 0m-2.832 8.849A4 4 0 0 1 10 16h4a4 4 0 0 1 3.834 2.855"/></g></svg>
  With Icon
</div>
<div class="badge badge-outline-primary badge-md">
  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0"/><path d="M9 10a3 3 0 1 0 6 0a3 3 0 1 0-6 0m-2.832 8.849A4 4 0 0 1 10 16h4a4 4 0 0 1 3.834 2.855"/></g></svg>
  With Icon
</div>

Badges can act as links, allowing users to navigate or trigger actions when clicked.

Clickable Clickable Clickable

HTML

<a href='#' class="badge badge-primary badge-link">Clickable</a>
<a href='#' class="badge badge-subtle-primary badge-link">Clickable</a>
<a href='#' class="badge badge-outline-primary badge-link">Clickable</a>

Deletable

Badges can include a delete action, allowing users to remove the badge using a close button.

Deletable
Deletable
Deletable

HTML

<div class="badge badge-primary">
  Deletable
  <button class="badge-action-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="currentColor" d="M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1S1 5.925 1 12s4.925 11 11 11M8.818 7.403L12 10.586l3.182-3.182l1.414 1.414L13.414 12l3.182 3.182l-1.415 1.414L12 13.414l-3.182 3.182l-1.415-1.414L10.586 12L7.403 8.818z"/></svg>
  </button>
</div>
<div class="badge badge-subtle-primary">
  Deletable
  <button class="badge-action-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="currentColor" d="M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1S1 5.925 1 12s4.925 11 11 11M8.818 7.403L12 10.586l3.182-3.182l1.414 1.414L13.414 12l3.182 3.182l-1.415 1.414L12 13.414l-3.182 3.182l-1.415-1.414L10.586 12L7.403 8.818z"/></svg>
  </button>
</div>
<div class="badge badge-outline-primary">
  Deletable
  <button class="badge-action-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="currentColor" d="M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1S1 5.925 1 12s4.925 11 11 11M8.818 7.403L12 10.586l3.182-3.182l1.414 1.414L13.414 12l3.182 3.182l-1.415 1.414L12 13.414l-3.182 3.182l-1.415-1.414L10.586 12L7.403 8.818z"/></svg>
  </button>
</div>

Clickable & deletable

Deletable Deletable Deletable

HTML

<a href="#" class="badge badge-primary badge-link">
  Deletable
  <button class="badge-action-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="currentColor" d="M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1S1 5.925 1 12s4.925 11 11 11M8.818 7.403L12 10.586l3.182-3.182l1.414 1.414L13.414 12l3.182 3.182l-1.415 1.414L12 13.414l-3.182 3.182l-1.415-1.414L10.586 12L7.403 8.818z"/></svg>
  </button>
</a>
<a href="#" class="badge badge-subtle-primary badge-link">
  Deletable
  <button class="badge-action-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="currentColor" d="M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1S1 5.925 1 12s4.925 11 11 11M8.818 7.403L12 10.586l3.182-3.182l1.414 1.414L13.414 12l3.182 3.182l-1.415 1.414L12 13.414l-3.182 3.182l-1.415-1.414L10.586 12L7.403 8.818z"/></svg>
  </button>
</a>
<a href="#" class="badge badge-outline-primary badge-link">
  Deletable
  <button class="badge-action-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="currentColor" d="M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1S1 5.925 1 12s4.925 11 11 11M8.818 7.403L12 10.586l3.182-3.182l1.414 1.414L13.414 12l3.182 3.182l-1.415 1.414L12 13.414l-3.182 3.182l-1.415-1.414L10.586 12L7.403 8.818z"/></svg>
  </button>
</a>

Class Overview

A list of all available utility classes for the badge component.

Class NameTypeDescription
badgeComponentBadge
badge-action-btnInnerBadge Action button
badge-primaryColorPrimary color
badge-secondaryColorSecondary color
badge-infoColorInfo color
badge-successColorSuccess color
badge-warningColorWarning color
badge-dangerColorDanger color
badge-subtle-{color}StyleSubtle style
badge-outline-{color}StyleOutline style
DefaultSizeSmall size (default)
badge-mdSizeMedium size
badge-lgSizeLarge size
badge-linkModifierClickable badge

CSS variables

The badge component is built using a set of CSS variables. These variables provide flexibility for customizing styles. See the Theming to customize styles globally and apply overrides as needed.

.badge {
  --badge-bg: var(--color-dark);
  --badge-color: var(--color-contrast);
  --badge-font-size: var(--text-xs);
  --badge-font-weight: var(--font-weight-semibold);
  --badge-line-height: 1;
  --badge-padding-y: --spacing(0.75);
  --badge-padding-x: --spacing(1.5);
  --badge-border-color: transparent;
  --badge-link-hover-bg: var(--color-dark);
  --badge-border-radius: calc(infinity * 1px);
}
Previous

Avatars
Next

Breadcrumb