Link·component·@astryxdesign/core

Link

A styled anchor for inline and standalone text navigation. Supports external links, underline variants, tooltips, and custom link components for router integration. Use it for navigating between pages or to external URLs.

Open in Playground @astryxdesign/core/Link

Showcases and examples

4 documented examples

Link

A standalone link.

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · link-showcase

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {Link} from '@astryxdesign/core/Link';

export default function LinkShowcase() {
  return (
    <Link href="#" isStandalone>
      Documentation
    </Link>
  );
}

Usage

Write descriptive, concise link text that clearly communicates the destination.
Set isStandalone when the link appears outside of inline text, so it receives proper base font sizing.
Only set label when the link content is not descriptive text (e.g. an icon-only link). For text links, the visible text is already the accessible name; adding label overrides it for screen readers, which is harmful.
Use Link for actions that do not navigate; use a Button instead.
Use generic text like "click here" or "read more"; describe the destination.
Set label on text links; aria-label prevents assistive technology from reading the actual link content.

Typed props

Link

Prop	Type and behavior
`as`	`LinkComponentType` Custom component to render instead of <a>
`label`	`string` Accessible label (aria-label). Only use when children are not self-descriptive (e.g. icon-only links). Omit for text links; the link text is the accessible name.
`href`	`string` Link destination URL. Astryx-owned links and clickable surfaces block javascript:, vbscript:, and data:text/html after control-character removal, outer-whitespace trimming, and case-insensitive scheme inspection. The same rule covers native anchors, custom routers, Markdown links, and every activation method. Relative paths, fragments, protocol-relative URLs, HTTP(S), mailto, tel, safe custom schemes, and accepted downloads keep their existing behavior. A rejected destination renders inertly without invoking a custom router. There is no bypass prop; exceptional behavior requires caller-owned custom rendering outside this guarantee. Images and other resource URLs have separate policies.
`hasUnderline`	`boolean` · default false Always show underline
`isDisabled`	`boolean` · default false Disables the link
`isExternalLink`	`boolean` · default false Opens in new tab with external icon and safe rel tokens
`newTabLabel`	`string` · default '(opens in new tab)' Screen-reader text announcing that an external link opens in a new tab. Override for localization.
`target`	`string` Where to open linked document. target="_blank" automatically adds noopener noreferrer.
`rel`	`string` Link relationship tokens. noopener noreferrer are merged automatically for target="_blank".
`download`	`string \| boolean` Causes the browser to download the linked URL. A string specifies the suggested filename.
`referrerPolicy`	`HTMLAttributeReferrerPolicy` Referrer policy for the link.
`onClick`	`MouseEventHandler` Click event handler
`tooltip`	`string` Tooltip text displayed on hover
`isStandalone`	`boolean` · default false Applies base font sizing
`size`	`'4xs' \| '3xs' \| '2xs' \| 'xsm' \| 'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl'` Explicit font size override forwarded to Text.
`weight`	`'normal' \| 'medium' \| 'semibold' \| 'bold'` Font weight override forwarded to Text.
`color`	`'primary' \| 'secondary' \| 'disabled' \| 'placeholder' \| 'accent' \| 'inherit'` · default 'accent' Text color forwarded to Text.
`display`	`'inline' \| 'block'` · default 'inline' Display type for Text.
`maxLines`	`number` · default 0 Maximum lines before truncation.
`children`	`ReactNode` · required Link content

LinkProvider

Prop Type and behavior

Prop	Type and behavior
`component`	`LinkComponentType` · required Component to use for all link elements. It receives accepted `href` and `to` values under the shared navigation rule described on the Link `href` prop. Supported structured destinations, including their `protocol`, are checked without changing object identity. If either supplied destination is rejected, Astryx renders inert content without invoking this component; it does not pass undefined or fall back to the other destination.
`children`	`ReactNode` · required Subtree

component

LinkComponentType · required

Component to use for all link elements. It receives accepted href and to values under the shared navigation rule described on the Link href prop. Supported structured destinations, including their protocol, are checked without changing object identity. If either supplied destination is rejected, Astryx renders inert content without invoking this component; it does not pass undefined or fall back to the other destination.

children

ReactNode · required

Subtree

Anatomy

Label · required

The visible text of the link.

Right icon · optional

Icon placed after the label to indicate an action affordance.

Left icon · optional

Icon placed before the label to represent meaning.

Accessibility

Link text

Color contrast · 1.4.3 Contrast (Minimum) · 4.5:1

Link text must have at least 4.5:1 contrast with the background behind it. For Pointer down, measure against the pressed overlay the link paints behind its text.

States: Rest, Hover, Pointer down

Theming

Targets

astryx-link

Visual props: color