<Link
href="https://vortex.design"
variant="plain"
color="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 text colors, 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 is available in three sizes: sm, md, and lg. The default size is md.
<Link href={vortexUrl} size="sm">Small link</Link>
<Link href={vortexUrl} size="md">Medium link</Link>Color
Use color to match the link to the surrounding UI state or emphasis.
<Link href={vortexUrl} color="neutral">Neutral link</Link>
<Link href={vortexUrl} color="gray">Gray link</Link>
<Link href={vortexUrl} color="primary">Primary link</Link>
<Link href={vortexUrl} color="info">Info link</Link>
<Link href={vortexUrl} color="success">Success link</Link>
<Link href={vortexUrl} color="warning">Warning link</Link>
<Link href={vortexUrl} color="critical">Critical link</Link>Inherit Color
Use inherit to match the color of the parent element.
<Stack attributes={{ style: { color: "goldenrod" } }}>
<Link href={vortexUrl} color="inherit">
Inherited link
</Link>
</Stack>Icons
Links can contain 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>External
Use openInNewTab when a link should open in a new tab.
Action
When href is omitted, Link can be used for lightweight inline actions with onClick.
<Link onClick={() => {}}>Action link</Link>Render
Use render in a client component to provide a custom root element. Forward the supplied attributes and provide Next.js Link’s required href explicitly.
"use client";
import NextLink from "next/link";
import { Link } from "@vortexlabs/vortex";
const Example = () => {
return (
<Link
href="/docs/quick-start"
render={(attributes) => (
<NextLink {...attributes} href="/docs/quick-start" />
)}
>
Quick Start
</Link>
);
};
export default Example;Disabled
The disabled prop prevents link navigation or action activation.
<Link href={vortexUrl} disabled>Disabled link</Link>
<Link onClick={() => {}} disabled>Disabled action</Link>Inline Usage
Links can be used inside body text and inherit the surrounding line flow.
Read the documentation for more details.
<Text as="p" size="body-md-desktop" color="subtle">
Read the <Link href={vortexUrl} color="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.