Link#
Component <a data-neo-link> is the kit's styled anchor: a plain native <a> that behaves exactly like a normal link (focus, keyboard activation, middle-click, :visited); the data-neo-link hook is all the kit's CSS keys on. The default variant reads as an inline prose link; the button variants make the anchor look exactly like <neo-button> so it can stand in for a button when the destination is a URL.
The selected state's markup and its scoped CSS. The CSS is wrapped in <style>@scope { ... }</style> and applies to the preview only. Edits change the preview above, applied live while Sync is on, or when you click Patch or Replace. Patch morphs the preview; Replace swaps it outright.
Signals
Datastar signals declared in the selected state's markup. Change a value to drive the preview, applied live while Sync is on, or when you click Patch.
Reference#
| Name | Type | Default | Description |
|---|---|---|---|
data-neo-link | boolean | none | Styling hook. Marks a native <a> for the kit's link styling; the wrapper adds it automatically, so raw HTML must include it to opt in. |
href | string | none | Link target. Omitted attribute renders a placeholder the browser doesn't treat as a link. |
variant | "default" | "button-default" | "button-primary" | "button-secondary" | "button-ghost" | "button-danger" | "default" | Visual style. default is an inline prose anchor; the rest adopt <neo-button> styling. |
target | string | none | Native browsing-context target (_blank, _self, a named context). |
rel | string | none | Space-separated link-type tokens (noopener, noreferrer, nofollow, …). |
download | string | none | Triggers a save-as instead of navigation; the value is the suggested filename. |
hreflang | string | none | BCP-47 language tag of the linked resource. Hint only, consumed by AT and translation tools. |
referrerpolicy | string | none | How much of the current URL is sent in the Referer header on follow. Empty inherits the document policy. |
aria-disabled | boolean | false | <a> has no native disabled; the wrapper stamps aria-disabled="true" + tabindex="-1" so AT and keyboard nav skip it. The kit's CSS owns the visual state. |
| Name | Description |
|---|---|
| default | Link content: text, a <neo-icon>, or arbitrary markup. |
| Name | Detail | Bubbles | Description |
|---|---|---|---|
click | none | yes | Native anchor activation; also fires on Enter. |
Examples#
Variants & states#
The inline default anchor, the five button-styled variants (button-default, button-primary, button-secondary, button-ghost, button-danger), and the disabled state.
Inline in prose#
The default variant is tuned to sit inside running text: accent colour, underline, and a focus ring that doesn't disturb the line box.
Open the getting started guide or jump straight to the API reference.
Call to action#
A button-styled link makes a navigation read as a primary action. Pair target="_blank" with rel="noopener noreferrer" on external destinations to get the cross-origin tab-isolation guarantee.