<Link
href="https://vortex.design"
variant="plain"
tone="neutral"
size="md"
weight="medium"
>
Vortex
</Link>Features
- Supports navigation with
hrefand inline actions withonClick. - Supports
plainandunderlinevariants. - Can open links in a new tab with
openInNewTab. - Can contain
startIcon,endIcon, or both. - Supports semantic tones, sizes, and font weights.
- Prevents navigation and activation when
disabled.
Variants
Link has two visual styles: plain and underline. The default variant is plain.
<Link href={vortexUrl} variant="plain">Plain link</Link>
<Link href={vortexUrl} variant="underline">Underline link</Link>Sizes
Link has three sizes: sm, md, and lg. The default is md.
<Link href={vortexUrl} size="sm">Small link</Link>
<Link href={vortexUrl} size="md">Medium link</Link>Tone
Use tone to match the link to the surrounding UI state or emphasis.
<Link href={vortexUrl} tone="neutral">Neutral link</Link>
<Link href={vortexUrl} tone="neutral-subtle">Neutral subtle link</Link>
<Link href={vortexUrl} tone="primary">Primary link</Link>
<Link href={vortexUrl} tone="info">Info link</Link>
<Link href={vortexUrl} tone="success">Success link</Link>
<Link href={vortexUrl} tone="warning">Warning link</Link>
<Link href={vortexUrl} tone="critical">Critical link</Link>Inherit Color
Use inherit to match the color of the parent element.
<Stack attributes={{ style: { color: "goldenrod" } }}>
<Link href={vortexUrl} tone="inherit">
Inherited link
</Link>
</Stack>Icons
Add startIcon, endIcon, or both. Icons inherit the link color.
<Link href={vortexUrl} startIcon={Hexagon}>Start icon</Link>
<Link href={vortexUrl} endIcon={ArrowRight}>End icon</Link>
<Link href={vortexUrl} startIcon={Hexagon} endIcon={Stars}>
Both icons
</Link>Weight
Use weight to adjust the emphasis of the link label.
<Link href={vortexUrl} weight="regular">Regular link</Link>
<Link href={vortexUrl} weight="medium">Medium link</Link>
<Link href={vortexUrl} weight="semibold">Semibold link</Link>
<Link href={vortexUrl} weight="bold">Bold link</Link>New Tab
Set openInNewTab to open the link in a new tab.
Action
Without href, pass onClick to run an inline action.
<Link onClick={() => {}}>Action link</Link>Render
Use render in a client component to render your own root, like Next.js Link. Spread the supplied attributes and pass href to it yourself.
"use client";
import NextLink from "next/link";
import { Link } from "@vortexlabs/vortex";
const Example = () => {
return (
<Link
href="/docs/web/quick-start"
render={(attributes) => (
<NextLink {...attributes} href="/docs/web/quick-start" />
)}
>
Quick Start
</Link>
);
};
export default Example;Disabled
Set disabled to block navigation and onClick.
<Link href={vortexUrl} disabled>Disabled link</Link>
<Link onClick={() => {}} disabled>Disabled action</Link>Inline Links
Links flow inside body text.
Read the documentation for more details.
<Text as="p" size="body-md-desktop" color="subtle">
Read the <Link href={vortexUrl} tone="info">documentation</Link> for more details.
</Text>Accessibility
Link renders as an anchor when href is provided, and as an interactive action when onClick is provided without href.
href for navigation so the component renders as an anchor.href is omitted and onClick is provided, Link receives button behavior through Interactive.openInNewTab opens links in a new tab and applies safe openInNewTab link attributes.disabled prevents navigation or activation and communicates disabled state.