Link
Styled, accessible anchors for internal navigation, external destinations and action-like links.
Link is an anchor with consistent typography, states, optional icons and external-link behavior.
Variants and sizes
variant accepts default, subtle, muted or underline. size accepts sm, default or lg.
<Link href="/docs">Documentation</Link>
<Link href="/settings" variant="subtle">Settings</Link>
<Link href="/more" size="lg" variant="underline">Read more</Link>Link remains an anchor element, so it supports normal anchor attributes and can be used for internal routes, downloadable resources or external destinations. The showcase groups the variants vertically so the differences in typography and decoration are easy to compare.
The default link color comes from ConfigProvider's theme.colors.link token. A color prop on an individual Link overrides that token for the current instance.
<ConfigProvider theme={{ colors: { link: '#7c3aed' } }}>
<Link href="/projects">Provider-colored link</Link>
</ConfigProvider>
<Link color="#dc2626" href="/delete">Local color override</Link>External links, icons and states
Set external to open in a new tab, apply rel="noreferrer" by default and show an external-link icon. Use newTab when a new tab is needed without automatically showing the external icon. externalIcon can force the icon on or off. iconLeft and iconRight accept any React node. disabled prevents navigation and removes the link from the tab order; loading displays a spinner and also prevents activation.
All standard anchor props such as href, target, rel, download, aria-label and event handlers are supported.
API Reference
| Prop | Values | Default | Description |
|---|---|---|---|
href | string | — | Destination URL. |
children | ReactNode | — | Link content. |
color | string | provider theme.colors.link | Per-instance text color override. Accepts any CSS color value. |
variant | default | subtle | muted | underline | default | Visual treatment. |
size | sm | default | lg | default | Text size. |
external | boolean | false | New-tab behavior and external icon. |
newTab | boolean | false | Opens in a new tab. |
externalIcon | auto | always | never | auto | Controls the external-link icon. auto shows it when external is true. An explicit iconRight takes precedence. |
iconLeft, iconRight | ReactNode | — | Leading or trailing content. |
disabled | boolean | false | Prevents activation, sets aria-disabled and removes the link from keyboard tab order. |
loading | boolean | false | Shows a loading spinner, sets aria-busy and prevents activation. |
className | string | — | Additional class name applied to the anchor. |
All other native anchor attributes are forwarded, including target, rel, download, aria-label and event handlers. When external or newTab is enabled, an explicitly supplied target or rel is preserved; otherwise the component uses _blank and noreferrer.