Skip to main content

​
What it is

A hyperlink to a resource that has its own URL, styled with the system’s link colors and an optional trailing icon. It renders a real <a> element, so right-click, middle-click, ⌘-click, and copy-link-address all work the way a reader expects from any link on the web.

​
Live example

​
Exports

The package’s Link export is a different thing entirely. It is a React Router wrapper that preserves titan-* query parameters on internal navigation — no styling, no variant, no icon, no visual decision of any kind. Import TextLink for the component this page documents. See TITAN-DIV-25.
  • The destination has a real URL, and a reader would reasonably want to open it in a new tab, copy it, or right-click it.
  • The action is navigation, not a change to application state.
  • The control sits inline in a sentence, or beside other content, rather than standing alone as a page-level or region-level action.

​
Choose something else when

​
Anatomy

The icon is always trailing. There is no leading-icon variant recorded anywhere in source.

​
Variants, sizes, and states

Underline is the one themed axis: none (default), hover, or always. There is no sizing prop — a Link inherits its font size from the surrounding text, which is why it has no small/medium distinction the way Button does.

​
Edge and failure states

​
Tokens

Verified directly from TextLink.overrides.ts — no per-component token emitter exists yet for this concept, so this table is hand-confirmed rather than generated.
No focus-state token is recorded. The override sets hover and visited; it sets nothing for :focus. Whether a Link’s focus ring comes from a browser default, an inherited style from the underlying framework, or nothing distinguishable at all is unconfirmed — see Open issues.

​
Composition

A Link is inline by default — it composes with surrounding text or sits beside other content, rather than occupying its own region. When several links belong together as a set of destinations rather than one sentence, that is a Menu or a list, not several adjacent Links.

​
Content

​
Accessibility

  • Renders a real <a> with role="link", confirmed by the component’s own test suite — keyboard and assistive-technology support come from the native element, not from ARIA added on top.
  • The trailing icon’s accessible treatment is unconfirmed — nothing in source marks it aria-hidden, so whether a screen reader announces it alongside the link text has not been verified.
  • Link text must make sense out of context. A screen reader user can navigate a page by pulling up a list of all links in isolation from their surrounding sentences; “Click here” and “Read more” are indistinguishable from each other in that list.

​
Constraints

​
Known issues

Link: open issues

Divergences, open decisions, and undocumented gaps for Link.

​
Why it works this way

The naming collision with the package’s own Link export is exactly why this page leads with a warning instead of burying it in a footnote. A reader who imports the wrong Link gets code that compiles, renders an anchor, and does something entirely unrelated — preserving tracking parameters rather than applying any of the styling this page documents. That failure mode is silent, which is the reason it is surfaced at the top of the page rather than left to the divergence register alone.

​
Status

  • Button — for actions that change state rather than navigate
  • Menu — for offering several destinations from one control
Last modified on September 2, 2026