Primitive

Badge

Status-leading signal label using terminal, ultra, or error only.

Badges are terse status markers. Keep them signal-bound, numeric only for counts, and avoid inventing warning states.
status
DOM renderImage render
BadgeDefault
LiveFeaturedBlocked

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Soft signal badges.
LiveFeaturedBlocked
Render state

Solid

Reserved high-emphasis badges.
LiveProDelete
Render state

Count

Notification count treatment.
243v2.4.1
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
intent'terminal' | 'ultra' | 'danger'terminalStatus intent. Amber warning is intentionally absent.
hierarchy'ghost' | 'soft' | 'solid'softBadge emphasis without opening visual overrides.
purpose'status' | 'count'statusStatus text or numeric count treatment.
childrenReactNode-Badge label or count.