Badge
StableStatus indicators and label tags for displaying categories, counts, and contextual information. Supports solid, outline, soft, dash, and ghost style variants across all semantic colours.
API Reference
| Attribute | Description | Type | Default |
|---|---|---|---|
color
|
Badge colour theme | string |
""
|
size
|
Badge size variant | string |
md
|
variant
|
Style variant — controls fill, border, and opacity treatment | string |
"" (solid)
|
closable
|
Adds an inline close button. Clicking removes the badge from the DOM via Alpine's $el.closest
|
boolean |
False
|
close_hx
|
Override the close button behaviour with an HTMX expression (e.g. hx-delete="/api/tag/1/")
|
string |
""
|
color
neutral
primary
secondary
accent
info
success
warning
error
size
xs
sm
md
lg
xl
variant
outline
dash
soft
ghost
Accessibility
Semantic role: <span> — purely presentational.
If a badge conveys critical status, pair it with a visually-hidden
<span class="sr-only"> label or
an aria-label on the containing element.
Closable badges: the close button renders as a
<button type="button"> and is
keyboard-focusable. Ensure the surrounding context still makes sense
after the badge is removed (avoid using them as the only identifier
for a piece of data).
Colour alone: never rely on colour alone to convey meaning. Always pair a colour with a text label.
Examples
Usage
<c-badge color="primary">Label</c-badge>
Colours
<c-badge color="neutral">Neutral</c-badge>
<c-badge color="primary">Primary</c-badge>
<c-badge color="secondary">Secondary</c-badge>
<c-badge color="success">Success</c-badge>
<c-badge color="error">Error</c-badge>Sizes
<c-badge color="primary" size="xs">XS</c-badge>
<c-badge color="primary" size="sm">SM</c-badge>
<c-badge color="primary" size="md">MD</c-badge>
<c-badge color="primary" size="lg">LG</c-badge>
<c-badge color="primary" size="xl">XL</c-badge>Style Variants
Outline
<c-badge color="primary" variant="outline">Primary</c-badge>
<c-badge color="success" variant="outline">Success</c-badge>Dash
<c-badge color="primary" variant="dash">Primary</c-badge>
<c-badge color="success" variant="dash">Success</c-badge>Soft
<c-badge color="primary" variant="soft">Primary</c-badge>
<c-badge color="success" variant="soft">Success</c-badge>Ghost
<c-badge color="primary" variant="ghost">Primary</c-badge>
<c-badge color="success" variant="ghost">Success</c-badge>Closable Badges
<c-badge color="primary" closable>Primary</c-badge>
<c-badge color="success" closable>Success</c-badge>Usage in Context
<span>Deployment status</span>
<c-badge color="success" variant="soft" size="sm">Stable</c-badge>