XDS — Design System

Link@xds/core v0.0.13 · XDSLink

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 Links

A vertical list of external links that open in a new tab with an indicator icon.

Link — Inline Text

A link embedded within a paragraph of body text.

Link — With Tooltips

Horizontal row of standalone links with descriptive hover tooltips.