This page ships a Markdown twin for AI tools.

ComponentsLink

displaytexulinot agent-emittableapp

Link

link

An inline sentence link. Underline and color come from link tokens; href is filtered by the URL policy.

One token contract, every theme. Display components take color, radius, density and state styling from the --tx-* token contract — the same variables the theme strip below overrides — so a theme swap re-colors them without per-component fixes.

Live examples

Inline sentence link

Inline sentence link

Loading demo…

External link

External link

In your theme

This page renders in the site theme, enterprise-neutral. Every one of the 210 library themes re-colors every component through the --tx-* contract. The three below carry real token values from the library, rendered at build — no island, no extra requests.

  • Violet

    light mode · AA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

  • Monochrome

    light mode · AA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

  • Accessible Dark Contrast

    dark mode · AAA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

Props

Public props for Link
NameKindRequiredDefaultDescription
hrefstringyes—Destination (URL policy)
hrefTrustenum (developer, untrusted)no"developer"—
externalbooleannofalseAdds rel=noopener noreferrer (also added for http(s) and target=_blank)
targetstringno—Link target; _blank always adds noopener noreferrer
relstringno—Extra rel tokens; noopener/noreferrer are merged when needed
labelstringno—Plain-text label, escaped
classstringno——
childrenslotno—Rich link text; replaced by a non-empty label

Keyboard

Keyboard behavior for Link
KeyAction
shttp(s) destinations, external, and target=_blank add rel=noopener noreferrer
A, aA refused href renders as text, never a dead link

Accessibility

  • Renders one real link that wraps in the line
  • http(s) destinations, external, and target=_blank add rel=noopener noreferrer
  • A refused href renders as text, never a dead link

Latest committed gates for link (as of 2026-10-23). Static snapshot — not live CI.

Behavior

n/ano behavior scenario

No dedicated behavior scenario for this catalog id (a styled or display surface, covered by its unit and axe tests).

Size (gzip)

texuli/link · budget 12.0 KiB

Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.

Axe

documented

  • tests/e2e/site-component-pages.spec.ts
  • docs/quality (a11y-*)

Site component pages axe gate; package-level a11y docs under docs/quality when present.

Browsers

  • chromium
  • webkit
  • mobile

Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.

When to use

Use when

  • A word or phrase inside a sentence that navigates

Don’t use when

Prefer another component

  • A button-shaped control (use button with href)
  • A whole card (use card with href)