XDS — Design System

XDSLink@xds/core · Link

Usage

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.

Best practices

Guidance	Practices
Do	Write descriptive, concise link text that clearly communicates the destination.
Do	Set `isStandalone` when the link appears outside of inline text, so it receives proper base font sizing.
Don't	Use Link for actions that do not navigate — use a Button instead.
Don't	Use generic text like "click here" or "read more" — describe the destination.
Don't	Use icon-only links without a visible text label.

Anatomy

Element		Description
Label	required	The visible text of the link.
Right icon		Icon placed after the label to indicate an action affordance.
Left icon		Icon placed before the label to represent meaning.

Import

ts
import {XDSLink} from '@xds/core/Link'

Props

Prop	Type	Description
labelrequired	string	Accessible label
childrenrequired	ReactNode	Link content
as	XDSLinkComponentType	Custom component to render instead of <a>
href	string	Link destination URL
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
target	string	Where to open linked document
onClick	MouseEventHandler	Click event handler
tooltip	string	Tooltip text displayed on hover
isStandalone	boolean (default: false)	Applies base font sizing

Sub-components

Link is a compound component with 1 sub-component.

XDSLink

Styled anchor link with variants, external link support, and polymorphic rendering.

Prop	Type	Description
labelrequired	string	Accessible label
childrenrequired	ReactNode	Link content
as	XDSLinkComponentType	Custom component to render instead of <a>
href	string	Link destination URL
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
target	string	Where to open linked document
onClick	MouseEventHandler	Click event handler
tooltip	string	Tooltip text displayed on hover
isStandalone	boolean (default: false)	Applies base font sizing

Examples

Common configurations, variations, and states.

Link — External LinksA vertical list of external links that open in a new tab with an indicator icon.

tsx
'use client';
import {XDSLink} from '@xds/core/Link';
import {XDSVStack} from '@xds/core/Layout';
export default function LinkExternalLinks() {
  return (
    <XDSVStack gap={2}>
      <XDSLink
        label="GitHub"
        href="https://github.com"
        isExternalLink
        isStandalone>
        GitHub
      </XDSLink>
      <XDSLink
        label="MDN Web Docs"
        href="https://developer.mozilla.org"
        isExternalLink
        isStandalone>
        MDN Web Docs
      </XDSLink>
      <XDSLink
        label="React Documentation"
        href="https://react.dev"
        isExternalLink
        hasUnderline
        isStandalone>
        React Documentation
      </XDSLink>
    </XDSVStack>
  );
}

Link — Inline TextA link embedded within a paragraph of body text.

tsx
'use client';
import {XDSLink} from '@xds/core/Link';
import {XDSText} from '@xds/core/Text';
export default function LinkInlineLink() {
  return (
    <XDSText type="body">
      Read the{' '}
      <XDSLink label="documentation" href="/docs">
        documentation
      </XDSLink>{' '}
      for more information about using XDS components.
    </XDSText>
  );
}

Link — With TooltipsHorizontal row of standalone links with descriptive hover tooltips.

tsx
'use client';
import {XDSLink} from '@xds/core/Link';
import {XDSHStack} from '@xds/core/Layout';
export default function LinksWithTooltips() {
  return (
    <XDSHStack gap={4} vAlign="center">
      <XDSLink
        label="Settings"
        href="/settings"
        tooltip="Configure your account settings"
        isStandalone>
        Settings
      </XDSLink>
      <XDSLink
        label="Profile"
        href="/profile"
        tooltip="View and edit your profile"
        isStandalone>
        Profile
      </XDSLink>
      <XDSLink
        label="Help"
        href="/help"
        tooltip="Get help and support"
        color="secondary"
        isStandalone>
        Help
      </XDSLink>
    </XDSHStack>
  );
}

Showcase source

tsx
'use client';
import {XDSLink} from '@xds/core/Link';
export default function LinkShowcase() {
  return (
    <XDSLink label="Documentation" href="/docs" isStandalone>
      Documentation
    </XDSLink>
  );
}