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-link

Inline text link. Wraps a native <a> so middle-click, prefetch, keyboard activation, and screen-reader semantics all work for free. Hue swap on hover / focus matches the rest of the system: primary at rest, secondary on hover, focus-ring on keyboard focus. Distinct from <hp-tether> (arc between hexes) and <hp-button> (block-level interactive hex).

Examples API Intent Changelog

Read the concepts overview or jump to hp-cell to see the primitives in action.

<body> <hp-link href="/docs">read the docs</hp-link> </body>

Source on GitHub — rel="noopener" is added automatically.

<body> <hp-link href="https://example.com" target="_blank"> external page </hp-link> </body>

Install

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

Properties

Property Attribute Type Default Description
href href string "" Destination URL.
target target string | undefined — Optional anchor target — `_blank`, `_self`, etc. When `_blank`, `rel="noopener"` is appended automatically.
rel rel string | undefined — Optional `rel` override. With `target="_blank"` the component defaults to `noopener` — set this prop to extend / override.

Slots

Slot Description
(default) Link label

When to use

Use for inline navigation in prose — the underline + hue read as a regular text link. For at-distance graph relationships (one molecule referring to another), use <hp-tether>. For block-level CTAs / action hexes, use <hp-button> or <hp-cell variant="action">. Embed a button-styled hp-cell in prose where a text link would do. The inline anchor reads more naturally for "click to navigate".

Accessibility

Native <a> internals give the right role, keyboard activation, and announce text automatically. target="_blank" auto-stamps rel="noopener". Focus ring uses --hp-focus-ring with the 2px offset shared with the rest of the system.

No per-component entries in CHANGELOG.md yet.

esc
↑ ↓ navigate ↵ open esc close