<Link
href="https://vortex.design"
variant="plain"
color="neutral"
size="md"
weight="medium"
>
Vortex
</Link>Features
- Assigns the correct HTML tag.
- Supports
plainandunderlinevariants. - Supports
externalanddisabledstates. - Can contain
leftIcon,rightIcon, or both. - Supports semantic
color,size, andweightvalues.
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 two sizes: sm and md. 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 leftIcon, rightIcon, or both. Icons inherit the link color.
<Link href={vortexUrl} leftIcon={Hexagon}>Left icon</Link>
<Link href={vortexUrl} rightIcon={ArrowRight}>Right icon</Link>
<Link href={vortexUrl} leftIcon={Hexagon} rightIcon={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 external 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 to provide a custom root element while keeping Link styles and interactive attributes.
import NextLink from "next/link";
<Link
href={vortexUrl}
render={(attributes) => (
<NextLink {...attributes} />
)}>
Custom rendered link
</Link>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.external opens links in a new tab and applies safe external link attributes.disabled prevents navigation or activation and communicates disabled state.