XDS — Design System

Link@xds/core · XDSLink v0.0.13

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.

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

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.

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>
  );
}

Usage

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

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.

Prop

Type

Description

labelrequired

string

Accessible label

childrenrequired

ReactNode

Link content

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

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> ); }

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> ); }

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> ); }

tsx

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