Link
Displays a hyperlink component with multiple styles and states.
Loading preview…
1
'use client';2
3
import { Link } from 'sdaia-ui';4
export default function LinkRealWorld() {5
return (Installation
npx sdaia-ui@latest add link
Usage
import { Link } from "@/components/ui/link"<Link href="#">Link text</Link>Examples
Size
Use the `size` prop to change the size of the link.
Loading preview…
1
<Link2
size="Large" | "Medium" | "Small"3
/>Default
The default Primary link style.
Loading preview…
1
<Link href="#">Link text</Link>Neutral
Use `style="Neutral"` for a subdued link that blends with surrounding text.
Loading preview…
1
<Link2
variant="Neutral"3
/>Inline
Use `inline={true}` for a link embedded within a line of body text.
Loading preview…
1
<Link2
inline={true}3
/>Visited
The visited state is applied automatically when the user has already navigated to the link target.
Loading preview…
1
<Link2
state="Visited"3
/>Disabled
Use `state="Disabled"` to prevent interaction with the link.
Loading preview…
1
<Link2
state="Disabled"3
/>API Reference
Link Props
Props for the Link component.
Prop | Type | Default | Required |
|---|---|---|---|
size? | LinkSize | 'sm' | 'md' | 'lg' | optional |
variant? | LinkStyle | 'primary' | 'neutral' | optional |
inline? | boolean | false | required |
disabled? | boolean | false | optional |
visited? | boolean | false | optional |
leadingIcon? | ReactNode | false | optional |
trailingIcon? | ReactNode | false | optional |
children? | ReactNode | false | optional |