Logo
hummingbird

Badges

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

Class Name Type Description
badge Component Badge
badge-action-btn Inner Badge Action button
badge-primary Color Primary color
badge-secondary Color Secondary color
badge-info Color Info color
badge-success Color Success color
badge-warning Color Warning color
badge-danger Color Danger color
badge-subtle Style Subtle style
badge-outline Style Outline style
Default Size Small size (default)
badge-md Size Medium size
badge-lg Size Large size
badge-link Modifier Clickable badge
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>
Buttons

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

The badge component is built using a set of CSS variables. These variables provide flexibility for customizing styles.

.badge {
  --badge-bg: var(--color-main);
  --badge-color: var(--color-contrast);
  --badge-font-size: var(--text-xs);
  --badge-padding-y: --spacing(0.75);
  --badge-padding-x: --spacing(1.5);
  --badge-border-color: transparent;
  --badge-link-hover-bg: var(--color-dark);
}