Displays a hyperlink component with multiple styles and states.
Loading demo: link-real-world
npx sdaia-ui@latest add link
import { Link } from "@/components/ui/link"<Link href="#">Link text</Link>Use the `size` prop to change the size of the link.
Loading demo: link-size
The default Primary link style.
Loading demo: link-default
Use `style="Neutral"` for a subdued link that blends with surrounding text.
Loading demo: link-neutral
Use `inline={true}` for a link embedded within a line of body text.
Loading demo: link-inline
The visited state is applied automatically when the user has already navigated to the link target.
Loading demo: link-visited
Use `state="Disabled"` to prevent interaction with the link.
Loading demo: link-disabled
Props for the Link component.
Prop | Type | Default | Required |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | — | optional |
variant | 'primary' | 'neutral' | — | optional |
inline | boolean | — | optional |
disabled | boolean | false | optional |
visited | boolean | — | optional |
leadingIcon | ReactNode | — | optional |
trailingIcon | ReactNode | — | optional |
children | ReactNode | — | optional |