Skip to content

Link

Navigates to another page or section, inline in text or as a standalone link.

betaReact AriaSource

Refunds usually reach your account within five working days. If yours hasn’t arrived, read how refunds are processed or contact support.

Installation

pnpm add @syntara/react @syntara/tokens
import { Link } from '@syntara/react';

Usage

import { Link } from '@syntara/react';

export function Help() {
  return (
    <p>
      Read <Link href="/help/refunds">how refunds work</Link>.
    </p>
  );
}

Examples

Standalone

Medium weight, underline on hover, optional trailing icon.

External and disabled

Accessibility guidelinesArchived reports

Accessibility

KeysAction
EnterFollows the link.
TabMoves focus to the link.
  • Inline links are underlined so they are not identified by colour alone.
  • Arrow and chevron icons flip in right-to-left layouts.
  • For client-side routing, wrap the app in React Aria's RouterProvider.

Guidelines

Do

  • Write link text that makes sense out of context: "View all claims", not "click here".
  • Say when a link opens in a new tab, and add an external icon.

Don’t

  • Don't use Link for actions that don't navigate; use a Button.
  • Don't remove the underline from inline links.

API reference

Link

variant
  • inlinedefault
  • standalone

inline sits in text and is always underlined; standalone is medium weight and underlines on hover.

href
string

Destination. Without it the link renders a span with role=link.

target
string

Native target, e.g. "_blank".

isDisabled
boolean

Disables the link (aria-disabled).

Default false

onPress
(e: PressEvent) => void

Called when the link is activated.

childrenRequired
ReactNode

Link text; a standalone link may end with a Tabler icon.

Tokens

The semantic tokens this component reads, grouped by what they control. Swatches show this site’s theme; change a tenant’s brand and the component follows with no code change.

Colour3
focus.ringtext.brandtext.disabled
Type1
font.weight.medium
Space and size1
space.1
Shape1
radius.field
Motion4
motion.duration.fastmotion.duration.springmotion.easingmotion.spring