Link
A styled anchor element for navigation and linking to resources.
Installation
pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/link.jsonUsage
import { Link } from "@/components/ui/link";<Link href="/about">About us</Link>With Next.js Link
Use the asChild prop to compose with Next.js Link or React Router Link:
import NextLink from "next/link";
import { Link } from "@/components/ui/link";
<Link asChild>
<NextLink href="/about">About us</NextLink>
</Link>;Examples
With icon
Icons can be placed before or after the link text. The component automatically sizes icons to match the text.
Inline text
By continuing, you agree to our Terms of Service and Privacy Policy.
API reference
Link
| Prop | Type | Description |
|---|---|---|
href | string | The URL the link points to |
asChild | boolean | Render as a child component (uses Radix Slot) |
target | string | Where to open the linked document |
rel | string | Relationship between current and linked doc |