Badge

Overview

Compact labels or badges to indicate status.

Default Outline Neutral Success Warning Danger

HEEx

<div class="flex flex-wrap items-center gap-2.25 max-w-65">
  <Badge.badge>Default</Badge.badge>
  <Badge.badge kind={:outline}>Outline</Badge.badge>
  <Badge.badge kind={:neutral}>Neutral</Badge.badge>
  <Badge.badge kind={:success}>Success</Badge.badge>
  <Badge.badge kind={:warning}>Warning</Badge.badge>
  <Badge.badge kind={:danger}>Danger</Badge.badge>
</div>

Status Indicators

Operational Degraded Offline

HEEx

<div class="flex flex-wrap items-center gap-2.25 max-w-65">
  <Badge.badge kind={:success}>
    <span class="size-1.25 rounded-full bg-current" aria-hidden="true"></span> Operational
  </Badge.badge>
  <Badge.badge kind={:warning}>
    <span class="size-1.25 rounded-full bg-current" aria-hidden="true"></span> Degraded
  </Badge.badge>
  <Badge.badge kind={:danger}>
    <span class="size-1.25 rounded-full bg-current" aria-hidden="true"></span> Offline
  </Badge.badge>
</div>

With icons

Place a decorative icon in the icon slot before the label to reinforce the badge's meaning.

Complete Pending Attention

HEEx

<div class="flex flex-wrap items-center gap-2.25">
  <Badge.badge kind={:success}>
    <Icon.icon name="hero-check-circle-mini" class="size-4" aria-hidden="true" /> Complete
  </Badge.badge>
  <Badge.badge kind={:warning}>
    <Icon.icon name="hero-clock-mini" class="size-4" aria-hidden="true" /> Pending
  </Badge.badge>
  <Badge.badge kind={:danger}>
    <Icon.icon name="hero-exclamation-triangle-mini" class="size-4" aria-hidden="true" />
    Attention
  </Badge.badge>
</div>

Corner Badge

Place a badge in the upper-right corner of an element with a relative wrapper and absolute positioning.

HEEx

<div class="relative inline-flex w-fit" role="img" aria-label="Inbox with 4 unread messages">
  <span class="flex size-12 items-center justify-center rounded-lg bg-muted text-muted-foreground">
    <Icon.icon name="hero-inbox" class="size-6" />
  </span>
  <span class="absolute right-0 top-0 -translate-y-1/2 translate-x-1/2" aria-hidden="true">
    <Badge.badge kind={:danger}>4</Badge.badge>
  </span>
</div>

Accessibility

As a non-interactive component, it does not present any notable accessibility properties.

Add this module

terminal

mix dizzy.add badge

Component API

Badge.badge

Attributes

Attributes for Badge.badge
Name	Type	Default	Values
`kind`	`:atom`	:default	:default, :outline, :neutral, :success, :warning, :danger
`rest`	`:global`	nil	—

Slots

Slots for Badge.badge
Name	Required
`inner_block`	Required