Badge
A small, rounded label for showing a status, a category or a count. Used in table cells, card headers and inside buttons.
Variants
The color is chosen with variant, using the same palette names as buttons. When omitted, the gray secondary is used. For statuses there are success, warning, danger and info; use primary for labels that do not report a status but should stand out in the main color (such as "New"). solid fills the badge with the color itself and makes the text white. On a screen, always show the same status in the same color (e.g. Active as success everywhere). The old names still work: brand = primary, neutral = secondary.
<div class="flex flex-wrap items-center gap-2">
<acun:badge>Draft</acun:badge>
<acun:badge variant="success">Active</acun:badge>
<acun:badge variant="warning">Pending</acun:badge>
<acun:badge variant="danger">Inactive</acun:badge>
<acun:badge variant="info">Notified</acun:badge>
<acun:badge variant="primary">New</acun:badge>
<acun:badge variant="dark">Archived</acun:badge>
</div>
<div class="mt-3 flex flex-wrap items-center gap-2">
<acun:badge solid>Draft</acun:badge>
<acun:badge variant="success" solid>Active</acun:badge>
<acun:badge variant="warning" solid>Pending</acun:badge>
<acun:badge variant="danger" solid>Inactive</acun:badge>
<acun:badge variant="info" solid>Notified</acun:badge>
<acun:badge variant="primary" solid>New</acun:badge>
<acun:badge variant="dark" solid>Archived</acun:badge>
</div>| Prop | Values |
|---|---|
variant | primary | secondary | success | danger | warning | info | dark |
solid | true | false (filled, white text) |
With an icon or a dot
Badge content is laid out in a row, so you can put a small acun:icon or a colored dot before the text. The dot does not replace the text for users who cannot tell colors apart; always state the status in words as well.
<div class="flex flex-wrap items-center gap-2">
<acun:badge variant="success"><acun:icon name="check-circle" size="3.5" />Delivered</acun:badge>
<acun:badge variant="danger"><acun:icon name="x-mark" size="3.5" />Canceled</acun:badge>
<acun:badge variant="success"><span class="size-1.5 rounded-full bg-current"></span>Online</acun:badge>
<acun:badge><span class="size-1.5 rounded-full bg-current"></span>Offline</acun:badge>
</div>As a counter
To show the number of pending tasks or unread notifications next to a button or a heading, place the badge inside the text.
<div class="flex flex-wrap items-center gap-3">
<acun:button variant="white">Awaiting approval <acun:badge variant="danger">12</acun:badge></acun:button>
<h3 class="flex items-center gap-2 text-sm font-semibold">New orders <acun:badge variant="primary">4</acun:badge></h3>
</div>Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
variant | secondary | primary · secondary · success · danger · warning · info · dark (brand = primary, neutral = secondary); an unknown value falls back to secondary |
solid | false | Fills the badge with the color itself; the text becomes white |