Hexpunk
InstallConceptsElementsProsehp-cellhp-codehp-copyhp-hexhp-latexhp-visually-hiddenhp-buttonhp-checkboxhp-formhp-labelhp-radiohp-selecthp-sliderhp-togglehp-toggle-grouphp-badgehp-taghp-progresshp-spinnerhp-backgroundhp-clusterhp-collapsiblehp-demohp-gridhp-scroll-areahp-separatorhp-sidebarhp-toolbarhp-avatarhp-iconhp-pixelhp-linkhp-menubarhp-navigation-menuhp-tabshp-alert-dialoghp-context-menuhp-dialoghp-dropdown-menuhp-hover-cardhp-popoverhp-tooltiphp-bannerhp-toasthp-tetherhp-module-handlehp-unfold-listhp-unfold-overlayhp-unfold-pagehp-bondhp-link-nodePaletteAnimationsReleases

hp-button

Button primitive — thin shell over <hp-cell variant="action"> with the semantics consumers expect from a button: role="button", focusable by default, Enter / Space activate, disabled blocks clicks and removes from tab order. Inside a <form>, type="submit" / "reset" drive the form lifecycle automatically. For non-action button styles, reach for <hp-cell> directly.

Examples API Intent Changelog click me deploy launch <body> <hp-button>click me</hp-button> <hp-button size="md">deploy</hp-button> <hp-button size="lg">launch</hp-button> </body> go live commit <body> <hp-button filled>go live</hp-button> <hp-button filled size="md">commit</hp-button> </body> can't click blocked <body> <hp-button disabled>can't click</hp-button> <hp-button filled disabled>blocked</hp-button> </body>
subscribe reset
<body> <form> <input name="email" type="email" /> <hp-button type="submit">subscribe</hp-button> <hp-button type="reset">reset</hp-button> </form> </body>

Install

bun add @hexpunk/core lit
import "@hexpunk/core";

Properties

Property Attribute Type Default Description
type type "button" | "submit" | "reset" "button" Native button type. Determines submit / reset behaviour inside a `<form>`. Default `button` (inert in forms).
disabled disabled boolean false When set, the button doesn't activate on click / Enter / Space and is removed from the tab order. Visual state inherits hp- cell's stroke at the disabled opacity.
filled filled boolean false High-emphasis filled CTA — forwards `filled` to the composed hp-cell.
size size "xxs" | "xs" | "sm" | "md" | "lg" "sm" Cell size. - `xxs` (20px) — dense / tabular controls (e.g. inline icon buttons in a table row) - `xs` (32px) — comfortable form-control sized buttons (e.g. hp-toggle-group, segmented controls) - `sm` (100px, default) — full content / CTA size - `md` (180px) — feature-tile button - `lg` (320px) — hero / landing tile

Slots

Slot Description
(default) Button label content

When to use

Use as the default button on any surface — the action variant's hue swap reads as interactive. Add filled for the one high-emphasis CTA per view. Set type="submit" inside forms to wire up the form lifecycle; the button calls form.requestSubmit() on activation. Use disabled for temporarily-unavailable actions — the button stays in the layout (no shift) but is removed from the tab order and ignores activation. Use for non-action chrome (cancel, back, edit, close, settings glyph). Those map to <hp-cell variant="secondary|utility|anchor">.

Accessibility

Auto role="button" and tabindex="0" on the host so screen readers announce the element correctly and keyboards can reach it. disabled stamps aria-disabled="true" and sets tabindex="-1". Enter and Space both fire click events the same way a native button would.

No per-component entries in CHANGELOG.md yet.

esc
↑ ↓ navigate ↵ open esc close