Link
A text hyperlink: the anchor primitive, in three emphasis variants with an automatic external-link affordance.
Live demo
Link is the styled <a> primitive: inline text that navigates, drawn in the link color with an offset underline and a token-colored focus ring. Three variants tune emphasis: default is the full-strength link, muted recedes into body text (underline only on hover) for in-prose and secondary nav, and quiet is the lowest-key treatment for dense footers and utility nav.
When target="_blank", Link automatically appends an external-link glyph, adds a screen-reader-only "(opens in a new tab)" hint, and sets rel="noopener noreferrer", handling security and accessibility without ceremony. Given no href, it degrades to inert text rather than rendering a broken anchor.
When to use
How this component composes with the rest of the set.
variant="muted" for in-prose links that shouldn't fight the surrounding text, and variant="quiet" for footer and utility nav. href instead. Link is for inline text. Props
5 props, straight from the manifest.
| Prop | Type | Default | Bindings | Description |
|---|---|---|---|---|
default is the full link color; muted recedes; quiet is the lowest-key, for dense nav. | ||||
_blank triggers the external icon, the SR hint, and an automatic rel. | ||||
rel. When unset and target="_blank", defaults to noopener noreferrer. | ||||
target="_blank" auto-detection. |
Appearance
Variants
default
The full-strength link: link color with a persistent offset underline.
muted
Recedes into body text: body-secondary color, underline only on hover, brightening to the link color.
quiet
The lowest-key treatment for dense or utility nav: body-tertiary color, no underline until hover.
Sizes
md
Links inherit their surrounding text size.
States
hover
Pointer over the link: color shifts toward the link/hover color and the underline appears or strengthens.
focus-visible
Keyboard focus: a token-colored ring, plus a transparent outline that becomes real in forced-colors mode.
external
An external link (target="_blank"): appends the icon and the SR-only new-tab hint, and sets rel.
Anatomy
The named parts that make up the component. A ::part() handle is reachable from your own stylesheet; the class beside it is the component's internal selector, which a shadow boundary keeps to itself.
link
The anchor element (or inert span when hrefless) carrying the variant class and link styling.
external-icon
The inline SVG glyph appended after the label when the link opens in a new tab.
sr-hint
The visually-hidden "(opens in a new tab)" text announced to screen readers for external links.
Tokens & coverage
What the component consumes, checked live against what the algorithm produces.
Live coverage check against the xtyle-default register
(derive(xtyleDefault, { anchors }) →
coverComponent(manifest, register)). Every token this component
consumes must be a key the algorithm produces.
--border-normal--border-thin--duration-fast--ease-standard--fg-2--fg-3--font-sans--link--link-hover--radius-sm--ring--space-1Slots
The link text.
Accessibility
<a> so keyboard and screen-reader link semantics come for free. target="_blank") get rel="noopener noreferrer" automatically and a visually-hidden "(opens in a new tab)" hint so the new-tab behavior is announced, not just shown. aria-hidden); the new-tab meaning lives in the SR-only hint. href, Link renders inert text rather than a clickable-looking dead anchor, and warns at runtime in the custom element. Code
Variants and external links
Three emphasis variants, plus the automatic external-link affordance on target="_blank".
<xtyle-link href="/docs">Read the docs</xtyle-link>
<xtyle-link href="https://example.com" target="_blank">External site</xtyle-link>
<nav>
<xtyle-link variant="muted" href="/about">About</xtyle-link>
<xtyle-link variant="quiet" href="/legal">Legal</xtyle-link>
</nav><script lang="ts">
import { Link } from "@xtyle/svelte";
</script>
<Link href="/docs">Read the docs</Link>
<Link href="https://example.com" target="_blank">External site</Link>
<nav>
<Link variant="muted" href="/about">About</Link>
<Link variant="quiet" href="/legal">Legal</Link>
</nav>---
import { Link } from "@xtyle/astro";
---
<Link href="/docs">Read the docs</Link>
<Link href="https://example.com" target="_blank">External site</Link>
<nav>
<Link variant="muted" href="/about">About</Link>
<Link variant="quiet" href="/legal">Legal</Link>
</nav>