← All components
navigation / stable

Link

Inline text link through the Kit router; external URLs open in a new tab with ↗.

LIVE PREVIEW
Loading preview…

When to use

  • Navigation inside text, tables and metadata.
  • Links to external docs or client sites.

Consider an alternative

  • Actions — use Button.
  • Navigation that should look like a button — use <Button href>.

Import

import { Link } from '@revido-llc/kit';

Keyboard interaction

  • Tab — focus
  • Enter — follow

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.

childrenReactNode—
classNamestring—
externalboolean—Opens in a new tab with `rel="noopener noreferrer"` and a ↗ icon. Defaults to true for absolute `http(s)://` hrefs.
variant"default" | "subtle""default"`default` cobalt text; `subtle` secondary text for dense UI and metadata.
autoFocusboolean—Whether the element should receive focus on render.
downloadboolean | string—Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).
hrefstring—A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).
hrefLangstring—Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).
isDisabledboolean—Whether the link is disabled.
onPress((e: PressEvent) => void)—Handler that is called when the press is released over the target.
pingstring—A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).
referrerPolicyHTMLAttributeReferrerPolicy—How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).
relstring—The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
render((props: DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, renderProps: LinkR…—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Note: You can check if `'href' in props` in order to tell whether to render an `<a>` element. Requirements: - You must render the expected element type (e.g. if `<a>` is expected, you cannot render a `<button>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
routerOptionsundefined—Options for the configured client side router.
targetHTMLAttributeAnchorTarget—The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).

Examples

Variants

<Link href="/team/ana">Ana</Link>
<Link variant="subtle" href="/projects/42">Website redesign</Link>

External

Absolute URLs get target=_blank, rel=noopener noreferrer and ↗.

<Link href="https://react-spectrum.adobe.com/react-aria/">React Aria docs</Link>

Related components