Link

A polymorphic link component with built-in accessibility, external link handling, and router integration via LinkProvider. Supports custom link components (e.g. React Router's Link) through the `as` prop or a parent `LinkProvider`.

Examples

Active

Documentation

<Link href="/docs" color="active">Documentation</Link>

Primary

Documentation

<Link href="/docs" color="primary">Documentation</Link>

Secondary

Documentation

<Link href="/docs" color="secondary">Documentation</Link>

Disabled

Documentation

<Link href="/docs" color="disabled">Documentation</Link>

Placeholder

Documentation

<Link href="/docs" color="placeholder">Documentation</Link>

Inherit

Documentation

<Link href="/docs" color="inherit">Documentation</Link>

Weight Normal

Documentation

<Link href="/docs" weight="normal">Documentation</Link>

Weight Medium

Documentation

<Link href="/docs" weight="medium">Documentation</Link>

Weight Semibold

Documentation

<Link href="/docs" weight="semibold">Documentation</Link>

Weight Bold

Documentation

<Link href="/docs" weight="bold">Documentation</Link>

Size Small

Documentation

<Link href="/docs" size="sm">Documentation</Link>

Size Large

Documentation

<Link href="/docs" size="lg">Documentation</Link>

Size XL

Documentation

<Link href="/docs" size="xl">Documentation</Link>

Size Inherit

Documentation

<Link href="/docs" size="inherit">Documentation</Link>

Underlined

Documentation

<Link href="/docs" hasUnderline>Documentation</Link>

External

External docs (opens in new tab)

<Link href="https://example.com" isExternalLink>External docs</Link>

External Same Tab

External docs in same tab

<Link
  href="https://example.com"
  isExternalLink
  target="_self"
>
  External docs in same tab
</Link>

External With Label

↗

<Link
  href="https://example.com/settings"
  isExternalLink
  label="Open settings"
>
  ↗
</Link>

External Underlined

External underlined docs (opens in new tab)

<Link
  href="https://example.com/docs"
  hasUnderline
  isExternalLink
>
  External underlined docs
</Link>

Provider Override

Provider link

<LinkProvider component={StoryLink}>
  <Link href="/provider">Provider link</Link>
</LinkProvider>

As Override

Direct custom link

<Link as={StoryLink} href="/as-override">
  Direct custom link
</Link>

Inline With Text

Read the documentation before changing these settings.

<Text as="p">
  Read the <Link href="/docs">documentation</Link> before changing these
  settings.
</Text>

Inline Display

I agree to the Terms of Service (opens in new tab) and Business Associate Agreement (opens in new tab). Inline links wrap with the sentence instead of moving to the next line whole.

<Text as="p" display="block" style={{maxWidth: 320}}>
  I agree to the{' '}
  <Link display="inline" href="https://example.com/terms" isExternalLink>
    Terms of Service
  </Link>{' '}
  and{' '}
  <Link display="inline" href="https://example.com/baa" isExternalLink>
    Business Associate Agreement
  </Link>
  . Inline links wrap with the sentence instead of moving to the next line
  whole.
</Text>

Inherits Surrounding Text Size

Large text with a matching link.

Body text with a matching link.

Supporting text with a matching link.

<>
  <Text as="p" display="block" type="large">
    Large text with a <Link href="/docs">matching link</Link>.
  </Text>
  <Text as="p" display="block">
    Body text with a <Link href="/docs">matching link</Link>.
  </Text>
  <Text as="p" display="block" type="supporting">
    Supporting text with a <Link href="/docs">matching link</Link>.
  </Text>
</>

With On Click

Log click

<Link href={undefined} onClick={fn()}>Log click</Link>

Without Href

Action-style link

<Link href={undefined}>Action-style link</Link>

Target Blank

Open report (opens in new tab)

<Link href="https://example.com/report" target="_blank">Open report</Link>

Custom Rel

Sponsored partner (opens in new tab)

<Link
  href="https://example.com/partner"
  rel="sponsored"
  target="_blank"
>
  Sponsored partner
</Link>

Is Disabled

Disabled link

This link is unavailable for your current role.

<Link
  href="/docs"
  isDisabled
  tooltip="This link is unavailable for your current role."
>
  Disabled link
</Link>

With Tooltip

Hover me

Go to documentation

<Link href="/docs" tooltip="Go to documentation">Hover me</Link>

Icon Only

⚙

<Link href="/docs" label="Settings">⚙</Link>

Disabled External

Disabled external (opens in new tab)

<Link
  href="https://example.com"
  isExternalLink
  isDisabled
>
  Disabled external
</Link>

API

Link

A polymorphic link component with built-in accessibility, external link handling, and router integration via LinkProvider. Supports custom link components (e.g. React Router's Link) through the `as` prop or a parent `LinkProvider`.

Prop	Type	Default	Description
aria-controls	string	—	Identifies the element(s) whose contents are controlled by the link.
aria-current	'page' | 'step' | 'location' | 'date' | 'time' | 'true'	—	Indicates the current item in a set (e.g. current page in navigation).
aria-describedby	string	—	Identifies the element(s) that describe the link.
aria-description	string	—	Accessible description for the link.
aria-details	string	—	Identifies the element that provides a detailed description.
aria-expanded	boolean	—	Indicates whether a controlled element is expanded or collapsed.
aria-haspopup	boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'	—	Indicates the link opens an interactive popup element.
aria-hidden	boolean	—	Indicates whether the element is exposed to the accessibility API.
aria-keyshortcuts	string	—	Keyboard shortcuts that activate or focus the link.
aria-labelledby	string	—	Identifies the element(s) that label the link.
aria-owns	string	—	Identifies element(s) owned by the link that are not DOM children.
aria-roledescription	string	—	Human-readable description of the role of the link.
as	LinkComponent	—	Custom element type to render instead of <a>. Useful for integrating with routers. If you want to set this globally, use LinkProvider at the top level of your app.
children*	ReactNode	—	Link content.
className	string	—	Optionally, rendering by setting the className.
color	"primary" | "secondary" | "disabled" | "inherit" | "placeholder" | "active"	—	Color variant controlling the link text color. Default is active.
data-testid	string	—	Test id applied to the root element.
display	"inline" | "inline-flex"	—	Layout of the link. Default is inline-flex, which never breaks the link across lines. Use inline for links inside sentences so they wrap with the surrounding text.
hasUnderline	boolean	—	Show a persistent underline on the link text.
href	string	—	URL destination. Custom link components receive this as both href and to so router links and anchor-like links can share the same Silver UI API. When omitted, Link renders as a native <button>.
isDisabled	boolean	—	Visually and functionally disable the link. Prevents navigation and removes from tab order.
isExternalLink	boolean	—	Mark as an external link. Adds an icon and rel="noopener noreferrer". Defaults target to "_blank" unless target is set explicitly.
label	string	—	Accessible label (aria-label). It is recommended to set this if your link does not contain sufficient text to make its purpose clear.
onClick	MouseEventHandler<HTMLElement>	—	Click handler. Not called when the link is disabled.
ref	Ref<HTMLElement>	—	Ref forwarded to the underlying anchor or button element.
rel	string	—	HTML rel attribute.
size	"sm" | "md" | "lg" | "inherit" | "xl" | "2xl" | "xs" | "3xl" | "4xl" | "5xl" | "6xl"	—	Font size variant. Default is inherit, so the link matches surrounding text.
style	CSSProperties	—	Inline styles applied to the root element.
target	string	—	HTML target attribute.
tooltip	string	—	Tooltip text shown on hover.
weight	"medium" | "inherit" | "normal" | "semibold" | "bold"	—	Font weight variant. Default is inherited from parent styles.

LinkProvider

Prop	Type	Default	Description
children*	ReactNode	—
component*	LinkComponent	—