hp-tag

Hex tag / chip with optional dismiss button. removable stamps an inline × that fires hp-tag-remove on activation. Pairs with <hp-badge> for non-dismissable status indicators.

Examples

API

Intent

Changelog

react

stable

beta

deprecated

removed

<body> <hp-tag>react</hp-tag> <hp-tag tone="positive">stable</hp-tag> <hp-tag tone="warn">beta</hp-tag> <hp-tag tone="alert">deprecated</hp-tag> <hp-tag tone="error">removed</hp-tag> </body>

lit

typescript

vite

<body> <hp-tag removable>lit</hp-tag> <hp-tag tone="positive" removable>typescript</hp-tag> <hp-tag tone="warn" removable>vite</hp-tag> document.querySelector("hp-tag") .addEventListener("hp-tag-remove", (ev) => { ev.currentTarget.remove(); }); </body>

Install

bun add @hexpunk/core lit

import "@hexpunk/core";

Properties

Property	Attribute	Type	Default	Description
`tone`	`tone`	`HpTagTone`	`"neutral"`	Semantic tone — same set as hp-cell.
`removable`	`removable`	`boolean`	`false`	Show the dismiss button. Fires `hp-tag-remove` on click / Enter / Space.
`disabled`	`disabled`	`boolean`	`false`	Disabled — blocks dismiss action and dims the visual.

Events

Event	Type	Description
`hp-tag-remove`	`Event`	When the dismiss × is activated (click / Enter / Space)

Slots

Slot	Description
`(default)`	Tag label

CSS Parts

Part	Description
`remove`	The dismiss button (when removable)

When to use

Use hp-tag when the user can dismiss / remove the item. For static status indicators, use <hp-badge>.