The Link component provides a styled hyperlink for navigation. It supports different variants, colors, and can include icons.
Basic Usage
import { Link } from 'reshaped';
function App() {
return (
<Link href="/about">
Learn more
</Link>
);
}
Variants
Link supports two visual variants:
<Link variant="underline" href="/about">
Underlined Link
</Link>
<Link variant="plain" href="/about">
Plain Link
</Link>
<Link color="primary" href="/home">Primary</Link>
<Link color="critical" href="/delete">Critical</Link>
<Link color="positive" href="/success">Positive</Link>
<Link color="warning" href="/warning">Warning</Link>
<Link color="inherit">Inherit</Link>
With Icons
Add an icon to the start of the link:
import { Link } from 'reshaped';
import IconExternal from '@/icons/External';
<Link icon={IconExternal} href="https://example.com">
External Link
</Link>
Navigation Examples
Internal Navigation
<Link href="/dashboard">
Go to Dashboard
</Link>
External Links
<Link href="https://example.com" attributes={{ target: "_blank", rel: "noopener" }}>
Visit Example
</Link>
With Click Handler
<Link
href="/page"
onClick={(e) => {
e.preventDefault();
// Custom navigation logic
}}
>
Custom Navigation
</Link>
Disabled State
Disable user interaction:
<Link disabled href="/unavailable">
Unavailable Link
</Link>
variant
'plain' | 'underline'
default:"underline"
Link render variant
color
'inherit' | 'critical' | 'primary' | 'positive' | 'warning'
default:"primary"
Link color based on color tokens
SVG component for the icon at the start position
URL to navigate to when clicked
onClick
(event: React.MouseEvent) => void
Callback when the link is clicked
Stop event propagation when clicked
Custom render function for advanced use cases
Additional CSS class name
Additional HTML attributes