Badge

hc-badge is a compact inline pill used to surface status next to a label. Variants are switched with data-variant.

Basic HTML

Preview Code

DraftIn reviewActivePendingFailed

<span class="hc-badge">Draft</span>
<span class="hc-badge" data-variant="info">In review</span>
<span class="hc-badge" data-variant="success">Active</span>
<span class="hc-badge" data-variant="warning">Pending</span>
<span class="hc-badge" data-variant="error">Failed</span>

Variants

Variant	Use for
omitted	Neutral / unknown status.
info	Informational state (e.g. “In review”).
success	Healthy / completed state.
warning	Needs attention soon.
error	Failed / error state.

Accessibility

• A badge is a visual signal — the text inside is the accessible name. Avoid icon-only badges; if you need one, include visually-hidden text.
• Color should not be the only differentiator. The variant labels (Active, Failed, …) carry the meaning. The color reinforces it.
• For announceable state changes (e.g. an order moving from “Pending” to “Failed”), put the badge inside a region with aria-live="polite" rather than relying on the badge itself.

Theming tokens

Token path	Purpose
badge.padding-x / -y	Inline / block padding.
badge.radius	Border radius.
badge.font-size	Font size.
badge.font-weight	Font weight.
badge.{variant}.{bg,fg,border}	Per-variant colors.

CSS variables

Show the generated CSS variables

--hc-badge-padding-x | -padding-y | -radius | -font-size | -font-weight
--hc-badge-default-bg | -fg | -border
--hc-badge-info-bg    | -fg | -border
--hc-badge-success-bg | -fg | -border
--hc-badge-warning-bg | -fg | -border
--hc-badge-error-bg  | -fg | -border

Related

• Alert — for prominent, block-level notices.
• Table — common host for badges in a status column.