Search documentation

Search by topic, API name, or import path.

GitHub ↗

function / @typed/ui

Link

Renders a native anchor with safe, eligible same-origin SPA navigation.

Modified clicks, downloads, external URLs, non-HTTP(S) destinations, and non-self targets retain browser behavior. Unsafe executable schemes are rendered as about:blank and their clicks are canceled. A user click handler runs first through DOM host event chaining; preventDefault() prevents the internal navigation decision.

Learn this UI primitive →

Package version
1.0.0-beta.13
Category
Native controls
Since
1.0.0

Import

import { Link } from "@typed/ui";

Signatures

export declare function Link<const Options extends object>(options: Options, ..._: Options extends LinkOptions ? [
] : [
    "Link options must satisfy LinkOptions"
]): Fx.Fx<RenderEvent, LinkError<Options>, LinkServices<Options>>;
export declare function Link<const Options extends object, const Host extends HostResult>(options: Options, host: Dom.HostOverride<Dom.HostProps<HTMLAnchorElement>, Renderable.Any, Host>, ..._: Options extends LinkOptions ? [
] : [
    "Link options must satisfy LinkOptions"
]): Fx.Fx<RenderEvent, LinkError<Options> | Fx.Error<Host>, LinkServices<Options> | Fx.Services<Host>>;

Examples

import { html } from "@typed/template";
import { Link } from "@typed/ui/Link";

export const AccountLinks = html`<nav aria-label="Account">
    ${Link({ href: "/account/profile", content: "Edit profile" })}
    ${Link({
      href: "/account/security",
      content: "Security settings",
      replace: false,
    })}
    ${Link({
      href: "https://www.w3.org/WAI/",
      content: "Accessibility resources (opens in a new tab)",
      props: { target: "_blank", rel: "noopener" },
    })}
  </nav>`;

Other public imports

These import paths expose the same declaration. Each page retains its own public name and signature.

Source