Skip to content
silver-uisilver-ui

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

Section titled “Examples”

Active

Section titled “Active”
Documentation
<Link href="/docs" color="active">Documentation</Link>

Primary

Section titled “Primary”
Documentation
<Link href="/docs" color="primary">Documentation</Link>

Secondary

Section titled “Secondary”
Documentation
<Link href="/docs" color="secondary">Documentation</Link>

Disabled

Section titled “Disabled”
Documentation
<Link href="/docs" color="disabled">Documentation</Link>

Placeholder

Section titled “Placeholder”
Documentation
<Link href="/docs" color="placeholder">Documentation</Link>

Inherit

Section titled “Inherit”
Documentation
<Link href="/docs" color="inherit">Documentation</Link>

Weight Normal

Section titled “Weight Normal”
Documentation
<Link href="/docs" weight="normal">Documentation</Link>

Weight Medium

Section titled “Weight Medium”
Documentation
<Link href="/docs" weight="medium">Documentation</Link>

Weight Semibold

Section titled “Weight Semibold”
Documentation
<Link href="/docs" weight="semibold">Documentation</Link>

Weight Bold

Section titled “Weight Bold”
Documentation
<Link href="/docs" weight="bold">Documentation</Link>

Size Small

Section titled “Size Small”
Documentation
<Link href="/docs" size="sm">Documentation</Link>

Size Large

Section titled “Size Large”
Documentation
<Link href="/docs" size="lg">Documentation</Link>

Size XL

Section titled “Size XL”
Documentation
<Link href="/docs" size="xl">Documentation</Link>

Size Inherit

Section titled “Size Inherit”
Documentation
<Link href="/docs" size="inherit">Documentation</Link>

Underlined

Section titled “Underlined”
Documentation
<Link href="/docs" hasUnderline>Documentation</Link>

External

Section titled “External”
External docs (opens in new tab)
<Link href="https://example.com" isExternalLink>External docs</Link>

External Same Tab

Section titled “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

Section titled “External With Label”
↗
<Link
  href="https://example.com/settings"
  isExternalLink
  label="Open settings"
>
  ↗
</Link>

External Underlined

Section titled “External Underlined”
External underlined docs (opens in new tab)
<Link
  href="https://example.com/docs"
  hasUnderline
  isExternalLink
>
  External underlined docs
</Link>

Provider Override

Section titled “Provider Override”
Provider link
<LinkProvider component={StoryLink}>
  <Link href="/provider">Provider link</Link>
</LinkProvider>

As Override

Section titled “As Override”
Direct custom link
<Link as={StoryLink} href="/as-override">
  Direct custom link
</Link>

Inline With Text

Section titled “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>

With On Click

Section titled “With On Click”
<Link href={undefined} onClick={fn()}>Log click</Link>

Without Href

Section titled “Without Href”
<Link href={undefined}>Action-style link</Link>

Target Blank

Section titled “Target Blank”
Open report (opens in new tab)
<Link href="https://example.com/report" target="_blank">Open report</Link>

Custom Rel

Section titled “Custom Rel”
Sponsored partner (opens in new tab)
<Link
  href="https://example.com/partner"
  rel="sponsored"
  target="_blank"
>
  Sponsored partner
</Link>

Is Disabled

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

With Tooltip

Section titled “With Tooltip”
Hover me
<Link href="/docs" tooltip="Go to documentation">Hover me</Link>

Icon Only

Section titled “Icon Only”
⚙
<Link href="/docs" label="Settings">⚙</Link>

Disabled External

Section titled “Disabled External”
Disabled external (opens in new tab)
<Link
  href="https://example.com"
  isExternalLink
  isDisabled
>
  Disabled external
</Link>

API

Section titled “API”
Section titled “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`.

PropTypeDefaultDescription
aria-controlsstring—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-describedbystring—Identifies the element(s) that describe the link.
aria-descriptionstring—Accessible description for the link.
aria-detailsstring—Identifies the element that provides a detailed description.
aria-expandedboolean—Indicates whether a controlled element is expanded or collapsed.
aria-haspopupboolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'—Indicates the link opens an interactive popup element.
aria-hiddenboolean—Indicates whether the element is exposed to the accessibility API.
aria-keyshortcutsstring—Keyboard shortcuts that activate or focus the link.
aria-labelledbystring—Identifies the element(s) that label the link.
aria-ownsstring—Identifies element(s) owned by the link that are not DOM children.
aria-roledescriptionstring—Human-readable description of the role of the link.
asLinkComponent—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.
classNamestring—Optionally, rendering by setting the className.
color"primary" | "secondary" | "disabled" | "inherit" | "placeholder" | "active"—Color variant controlling the link text color. Default is active.
data-testidstring—Test id applied to the root element.
hasUnderlineboolean—Show a persistent underline on the link text.
hrefstring—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>.
isDisabledboolean—Visually and functionally disable the link. Prevents navigation and removes from tab order.
isExternalLinkboolean—Mark as an external link. Adds an icon and rel="noopener noreferrer". Defaults target to "_blank" unless target is set explicitly.
labelstring—Accessible label (aria-label). It is recommended to set this if your link does not contain sufficient text to make its purpose clear.
onClickMouseEventHandler<HTMLElement>—Click handler. Not called when the link is disabled.
refRef<HTMLElement>—Ref forwarded to the underlying anchor or button element.
relstring—HTML rel attribute.
size"sm" | "md" | "lg" | "inherit" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl"—Font size variant. Default is md.
styleCSSProperties—Inline styles applied to the root element.
targetstring—HTML target attribute.
tooltipstring—Tooltip text shown on hover.
weight"medium" | "inherit" | "normal" | "semibold" | "bold"—Font weight variant. Default is inherited from parent styles.

LinkProvider

Section titled “LinkProvider”
PropTypeDefaultDescription
children*ReactNode—
component*LinkComponent—