Badge & chip
A small status label, and its interactive cousin. A Badge is a statement about something and never gains a hover or a click - if it needs to be interactive it is a small Button. A Chip stands for a value the reader put there and can take away again, so it contains a real button.
Reference
sk-badge
Four statuses across three treatments. Padding is in em, so a badge scales with whatever text it sits beside.
<span class="sk-badge" data-status="success">
Label
</span>| Attribute | Type | Default | Notes |
|---|---|---|---|
data-status | "neutral" | "info" | "success" | "warning" | "danger" | "neutral" | neutral is for counts and plain labels that carry no status at all. |
data-variant | "solid" | "outline" | soft | soft is the pale well. solid is loud - use it sparingly or nothing stands out. |
data-size | "sm" | "lg" | md |
sk-chip
The remove control is a real <button> - never a decorated span with a handler, which is neither focusable nor announced - and it is named after the value it removes, because "Remove" repeated down a row of chips tells the reader nothing. Taking the node out of the document needs script, which this system does not ship, so the button is left for the application to wire: hx-delete, a form submit, its own listener. The same honesty as Toast dismissal.
<span class="sk-chip" data-selected="true">
Auckland
<button class="sk-chip-remove" aria-label="Remove Auckland">…</button>
</span>| Attribute | Type | Default | Notes |
|---|---|---|---|
data-selected | "true" | - | Fills the chip. For a filter that is currently applied. |
sk-chip-remove | button | - | 1.5rem square - the WCAG target minimum met by the control itself. A chip's remove button is the one target in this system with no larger parent to inherit it from. |
sk-chip-group | wrapper | - | Wraps rather than scrolls: a filter row that runs off the edge hides the filters that are on. |
Examples
Statuses
Colour is never the only signal - add an icon whenever the badge is the sole carrier of the meaning.
neutralinfosuccesswarningdanger
Show markup
<div class="sk-flex sk-flex-wrap sk-items-center sk-gap-2">
<span class="sk-badge" data-status="neutral">
neutral
</span>
<span class="sk-badge" data-status="info">
info
</span>
<span class="sk-badge" data-status="success">
success
</span>
<span class="sk-badge" data-status="warning">
warning
</span>
<span class="sk-badge" data-status="danger">
danger
</span>
</div>Treatments
softneutralinfosuccesswarningdangersolidneutralinfosuccesswarningdangeroutlineneutralinfosuccesswarningdangerShow markup
<div class="sk-flex sk-flex-col sk-gap-3">
<div class="sk-flex sk-flex-wrap sk-items-center sk-gap-2">
<code class="sink-row-label">
soft
</code>
<span class="sk-badge" data-status="neutral" data-variant="soft">
neutral
</span>
<span class="sk-badge" data-status="info" data-variant="soft">
info
</span>
<span class="sk-badge" data-status="success" data-variant="soft">
success
</span>
<span class="sk-badge" data-status="warning" data-variant="soft">
warning
</span>
<span class="sk-badge" data-status="danger" data-variant="soft">
danger
</span>
</div>
<div class="sk-flex sk-flex-wrap sk-items-center sk-gap-2">
<code class="sink-row-label">
solid
</code>
<span class="sk-badge" data-status="neutral" data-variant="solid">
neutral
</span>
<span class="sk-badge" data-status="info" data-variant="solid">
info
</span>
<span class="sk-badge" data-status="success" data-variant="solid">
success
</span>
<span class="sk-badge" data-status="warning" data-variant="solid">
warning
</span>
<span class="sk-badge" data-status="danger" data-variant="solid">
danger
</span>
</div>
<div class="sk-flex sk-flex-wrap sk-items-center sk-gap-2">
<code class="sink-row-label">
outline
</code>
<span class="sk-badge" data-status="neutral" data-variant="outline">
neutral
</span>
<span class="sk-badge" data-status="info" data-variant="outline">
info
</span>
<span class="sk-badge" data-status="success" data-variant="outline">
success
</span>
<span class="sk-badge" data-status="warning" data-variant="outline">
warning
</span>
<span class="sk-badge" data-status="danger" data-variant="outline">
danger
</span>
</div>
</div>Sizes
SmallMediumLarge
Show markup
<div class="sk-flex sk-flex-wrap sk-items-center sk-gap-2">
<span class="sk-badge" data-status="success" data-size="sm">
Small
</span>
<span class="sk-badge" data-status="success">
Medium
</span>
<span class="sk-badge" data-status="success" data-size="lg">
Large
</span>
</div>With icons
PassingDegradedFailingQueued
Show markup
<div class="sk-flex sk-flex-wrap sk-items-center sk-gap-2">
<span class="sk-badge" data-status="success">
<svg class="sk-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M20 6 9 17l-5-5">
</path>
</svg>
Passing
</span>
<span class="sk-badge" data-status="warning">
<svg class="sk-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M10.3 4.3 2.6 17.4a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0Z">
</path>
<path d="M12 10v4">
</path>
<path d="M12 17h.01">
</path>
</svg>
Degraded
</span>
<span class="sk-badge" data-status="danger">
<svg class="sk-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<circle cx="12" cy="12" r="9">
</circle>
<path d="m15 9-6 6">
</path>
<path d="m9 9 6 6">
</path>
</svg>
Failing
</span>
<span class="sk-badge" data-status="info" data-variant="solid">
<svg class="sk-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<circle cx="12" cy="12" r="9">
</circle>
<path d="M12 11v5">
</path>
<path d="M12 8h.01">
</path>
</svg>
Queued
</span>
</div>Chips
Tab into the row: every x is a real button with its own name. The last one has no remove control, which is the moment to ask whether it should have been a Badge.
Auckland Wellington Passing Read only
ada@example.com grace@example.com
Show markup
<div class="sk-flex sk-flex-col sk-gap-5">
<div class="sk-chip-group">
<span class="sk-chip" data-selected="true">
Auckland
<button type="button" class="sk-chip-remove" aria-label="Remove Auckland">
<svg class="sk-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M18 6 6 18">
</path>
<path d="m6 6 12 12">
</path>
</svg>
</button>
</span>
<span class="sk-chip" data-selected="true">
Wellington
<button type="button" class="sk-chip-remove" aria-label="Remove Wellington">
<svg class="sk-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M18 6 6 18">
</path>
<path d="m6 6 12 12">
</path>
</svg>
</button>
</span>
<span class="sk-chip">
<svg class="sk-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M20 6 9 17l-5-5">
</path>
</svg>
Passing
<button type="button" class="sk-chip-remove" aria-label="Remove Passing">
<svg class="sk-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M18 6 6 18">
</path>
<path d="m6 6 12 12">
</path>
</svg>
</button>
</span>
<span class="sk-chip">
Read only
</span>
</div>
<div class="sk-chip-group">
<span class="sk-chip">
ada@example.com
<button type="button" class="sk-chip-remove" aria-label="Remove ada@example.com" hx-delete="/recipients/1" hx-swap="outerHTML" hx-target="closest .sk-chip">
<svg class="sk-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M18 6 6 18">
</path>
<path d="m6 6 12 12">
</path>
</svg>
</button>
</span>
<span class="sk-chip">
grace@example.com
<button type="button" class="sk-chip-remove" aria-label="Remove grace@example.com">
<svg class="sk-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M18 6 6 18">
</path>
<path d="m6 6 12 12">
</path>
</svg>
</button>
</span>
</div>
</div>