Link
A versatile component for creating styled hyperlinks and navigation elements with hover states and accessibility features.
Source
LLM docs
Package
Examples
4
Properties
42
Playground
Basics
Embed links directly inside supporting copy to guide readers toward related resources.
Loading demo…
import { Link, Text } from '@plocks/ui';
export function Demo() {
return (
<Text>
Before publishing, review the <Link href="#brand">brand guidelines</Link>, consult our{' '}
<Link href="#voice">voice and tone guide</Link>, and confirm each launch in the{' '}
<Link href="#releases">release checklist</Link>.
</Text>
);
}External Destinations
Use the
external prop when pointing to destinations outside the current shell.Loading demo…
import { Link } from '@plocks/ui';
export function Demo() {
return (
<Link href="https://reactnative.dev" external>
React Native documentation
</Link>
);
}Size Options
Demonstrate how the
size token scales link typography and spacing.Loading demo…
import { Block, Link, Row, Text } from '@plocks/ui';
const SIZES = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] as const;
export function Demo() {
return (
<Row align="center" gap="lg" wrap="wrap">
{SIZES.map((size) => (
<Block key={size} align="center">
<Link size={size} href="#">Link</Link>
<Text variant="small">{size}</Text>
</Block>
))}
</Row>
);
}Visual Variants
Compare persistent and hover-only underlines alongside subtle variants.
Loading demo…
import { Block, Link } from '@plocks/ui';
export function Demo() {
return (
<Block>
<Link href="#">Default underline</Link>
<Link href="#" variant="hover-underline">
Hover underline
</Link>
<Link href="#" variant="subtle">
Subtle primary
</Link>
<Link href="#" variant="subtle" c="gray">
Subtle gray
</Link>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources