Link
A text link with the tone scale, the standard focus ring, and defaults for external links (target, rel, arrow glyph).
Component behavior
- Navigation links within text.
- Actions that navigate to a destination.
- External links with target and relationship attributes.
Button: activation performs an operation instead of navigation.
SidebarNavItem: the link is an application navigation item.
Prose: links are generated by an existing Markdown renderer.
Props
Link extends AnchorHTMLAttributes<HTMLAnchorElement> (minus color).
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | "a" | Element or router component used to render the link. |
variant | LinkVariant | "underline" | "underline" | "hover" | "plain". |
tone | Tone | "info" | Tone scale: neutral, primary, info, ok, warn, err. |
size | keyof FontSizeScale | — | Inherits the surrounding size when unset. |
weight | keyof typeof fontWeight | — | Inherits the surrounding weight when unset. |
external | boolean | — | Adds an arrow icon, target=_blank, and rel=noopener noreferrer unless target or rel is supplied. |
icon | ReactNode | — | Leading glyph, sized in em so it tracks the text. |
disabled | boolean | — | Renders text without href or a keyboard tab stop. |
Examples
Variants
underline is the default and suits body text, where the underline signals that the words are a link. hover underlines only on hover; use it in dense layouts such as table cells or toolbars. plain never underlines; use it when the surrounding layout already makes the link obvious.
Tones
External links
external adds the arrow glyph, sets target="_blank", and sets rel="noopener noreferrer", which stops the opened page from accessing window.opener. Both attributes are only defaults: set target or rel yourself and your values are used instead.
With an icon
Disabled
There is no disabled state for an anchor in HTML, so a disabled Link renders as a span with no href. Hiding a live link behind pointer-events: none would leave it in the tab order and usable from a keyboard.
With a router
Pass a router link component to as and it renders instead of <a>, keeping the Link styling so client-side navigation works. Props not consumed by Link, such as to, prefetch, and replace, pass through to that component.
import NextLink from "next/link";
import { Link } from "@solarius/onset";
<Link as={NextLink} href="/nodes/fra1-worker-07">
fra1-worker-07
</Link>;import { Link, TextLink } from "@solarius/onset";
import type { LinkVariant, LinkProps } from "@solarius/onset";
<Link href="/runs/8812">View run</Link>
<Link href="https://status.example.com" external>Status page</Link>
// Same component, non-colliding name:
<TextLink href="/docs">Documentation</TextLink>See Prose for links inside rendered markdown, which are styled by the tag rather than by this component.