hp-badge

Small toned status / count badge. Thin shell over <hp-cell variant="content" size="sm"> with an optional tone overlay and the active filled state. For larger or more prominent indicators reach for hp-cell directly.

Examples

API

Intent

Changelog

err

online

queued

retry

down

<body> <hp-badge tone="positive" active>online</hp-badge> <hp-badge tone="warn" active>queued</hp-badge> <hp-badge tone="alert" active>retry</hp-badge> <hp-badge tone="error" active>down</hp-badge> </body>

Install

bun add @hexpunk/core lit

import "@hexpunk/core";

Properties

Property	Attribute	Type	Default	Description
`tone`	`tone`	`HpBadgeTone`	`"neutral"`	Semantic tone. Defaults to `neutral` (no tone overlay — uses the hp-cell content variant tokens).
`active`	`active`	`boolean`	`false`	Fills the badge with the tone-container colour when set. Reads as "this state is in effect" — see hp-cell's `active`.

Slots

Slot	Description
`(default)`	Badge label or count

When to use

Use for counts, short status pills, indicator chips next to text or hex chrome. The sm size keeps the badge from competing with surrounding content.

Pair tone with state (positive = healthy, warn = needs attention, alert = elevated, error = failed). Active fills the badge for in-effect states.

Use for primary content. If the badge needs to be the focal element, use <hp-cell tone="..."> at size="md" or "lg".

No per-component entries in CHANGELOG.md yet.

Install

Properties

Slots

When to use

Contents