Link
A token-styled anchor.
Usage
import { Link } from "@kanzo-tech/ui";<Link href="/board/Q-1058">Read the contract</Link>This is a plain <a>, and the design system knows nothing about any router — see
a router link.
Variants
plain inherits the surrounding colour and only underlines on hover, for links inside a
sentence that should not be four blue words.
API Reference
| Prop | Type | Default |
|---|---|---|
variant | "default" | "subtle" | "plain" | "default" |
asChild | boolean | false |
Extends React.ComponentProps<"a">, so href, target, rel and ref pass through.
LinkProps is exported, so a wrapper can take the same props without restating them.
A router link
Link renders an ark.a, so it takes asChild and puts its treatment on your router's link
instead of rendering an anchor of its own:
import { Link } from "@kanzo-tech/ui";
import { Link as RouterLink } from "@kanzo-tech/navigation/next";
<Link asChild variant="subtle">
<RouterLink href="/board/Q-1058">A basilisk, and it knows the route</RouterLink>
</Link>One anchor comes out: Link's classes and data-slot="link" merged onto the child, and the
child's href and handlers kept. The library never imports a router, and its recipe stays off the
barrel — asChild is the one spelling of "this treatment on someone else's element".