Link

An accessible anchor component with variant styles, external link support, and icon slots. Links inherit the surrounding text size.

Import

import { Link } from "@hyzer-labs/ui"

Demo

Default link

<Link href="/docs">Default link</Link>

Subtle link

<Link href="/docs" variant="subtle">Subtle link</Link>

Nav link

<Link href="/docs" variant="nav">Nav link</Link>

View on GitHub · View on GitHub

<!-- external renders a glyph automatically (pass iconEnd to replace it) -->
<Link href="https://github.com/hyzerlabs/ui" external>View on GitHub</Link>
<Link href="https://github.com/hyzerlabs/ui" external externalIcon={false}>
	View on GitHub
</Link>

<!-- This link points at the page you are on, so it carries aria-current="page" -->
<Link href="/docs/components/link" ariaCurrent="page">Link docs (this page)</Link>
<Link href="/docs/components/button">Button docs</Link>

class merges after hz-link, so bring your own class and it wins. Unlayered CSS like this beats the theme without needing !important.

Hover me

<Link href="#" class="fancy-link">Hover me</Link>

<style>
	:global(.fancy-link) {
		text-decoration: none;
		background-image: linear-gradient(
			90deg,
			var(--hz-intent-primary),
			var(--hz-intent-secondary)
		);
		background-repeat: no-repeat;
		background-position: 0 100%;
		background-size: 0% 4px;
		transition: background-size 300ms ease;
	}

	:global(.fancy-link:hover) {
		background-size: 100% 4px;
	}

	@media (prefers-reduced-motion: reduce) {
		:global(.fancy-link) {
			transition: none;
		}
	}
</style>

Props

Name	Type	Default	Note
`href`	`string`	`—`	Required.
`external`	`boolean`	`false`
`externalIcon`	`boolean`	`true`	Auto external glyph; iconEnd replaces it, false suppresses it.
`variant`	`'default' \| 'subtle' \| 'nav'`	`'default'`
`ariaCurrent`	`'page' \| 'step' \| 'true'`	`—`
`ariaLabel`	`string`	`—`
`onclick`	`(e: MouseEvent) => void`	`—`
`class`	`string`	`—`	Merged after the hz-link class.
`children`	`Snippet`	`—`
`iconStart`	`Snippet`	`—`
`iconEnd`	`Snippet`	`—`

Theme hooks

What this component promises your CSS. The reference theme styles exactly these — from @layer hz-theme, so your unlayered rules win. See Styling Components for the how.

Root class: .hz-link

Data attributes

Hook	Values	Styles
`data-variant`	`'default' \| 'subtle' \| 'nav'`	Its own union, not the shared Variant. subtle inherits colour; nav is quiet until hover or aria-current. No size hook by design — a link inherits its surrounding text size.
`[aria-current]`	`'page' \| 'step' \| 'true'`	Load-bearing for styling, not just semantics: the active nav-link rule is [data-variant="nav"][aria-current].
`data-external`	`present on external links`	Accompanies target="_blank" and the visually-hidden "opens in new tab" hint. The reference theme styles the glyph instead, so this one is yours.

Part classes

Hook	Values	Styles
`.hz-link-external-icon`	`child element`	The auto-rendered external glyph. Absent when you supply your own iconEnd.

External links automatically add target="_blank", rel="noopener noreferrer", a decorative external glyph, and a visually-hidden "(opens in new tab)" string. ariaCurrent sets aria-current on the anchor for nav links.