Component
Link
An always-underlined navigation link with default or subtle emphasis. Render an anchor directly, or use asChild to style a router adapter while preserving its link behavior.
Xem trước
import { Link } from "@/components/ui/link"
<Link href="#guide">Read the guide</Link>Cách dùng
Khi nào dùng
- Navigate to a page, resource or section from text.
- Place an underlined destination within a sentence.
Khi nào không dùng
- An action that changes the current page without navigating. Use Button.
- A path through parent pages. Use Breadcrumb.
Biến thể
variant
default uses accent text; subtle uses secondary text.
import { Link } from "@/components/ui/link"
<Link href="#guide">Read the guide</Link>
<Link variant="subtle" href="#guide">Read the guide</Link>Ví dụ
Inline navigation
import { Link } from "@/components/ui/link"
<p className="text-sm text-text-primary">
<span>Read the </span>
<Link href="#installation">installation guide</Link>
<span> before creating your first theme.</span>
</p>External destination
import { Link } from "@/components/ui/link"
<Link external href="https://example.com/guide" target="_blank" rel="help">Open the guide</Link>Composed link
A single child provides the destination. Use the same composition with an application router adapter.
import { Link } from "@/components/ui/link"
<Link asChild variant="subtle">
<a href="#project">View project</a>
</Link>Nên và không nên
Nên
- Use meaningful destination text.
- Use asChild for router adapters with their own destination props.
- Make opening a new tab an explicit choice with target="_blank".
Không nên
- Do not use Link for actions that do not navigate; use Button.
- Do not use external as a substitute for target.
- Do not nest anchors.
Props
| Tên | Kiểu | Giá trị | Mặc định | Mô tả |
|---|---|---|---|---|
| variant | enum | default | subtle | default | default uses accent text; subtle uses secondary text. |
| external | boolean | - | false | Adds a decorative external-link icon. Does not change the target. |
| asChild | boolean | - | false | Styles a single child link or router adapter without a nested anchor. |
| href | string | - | - | Destination for the native anchor. A child router adapter may supply its own destination. |
| target | string | - | - | Native navigation target. _blank merges noopener and noreferrer into rel. |
| rel | string | - | - | Relationship values. Existing values are retained when safe values are added for _blank. |
Slot
| Tên | Bắt buộc | Mô tả |
|---|---|---|
| children | có | Visible destination name, or the single child link when asChild is true. |
Cấu tạo
| Phần | Mô tả |
|---|---|
| root | Anchor or caller-supplied link with an underline and visible keyboard focus. |
| icon | Decorative external-link icon, present only when external is true. |
Khả năng truy cập
Role: link
| Phím | Hành động |
|---|---|
| Tab | Focus the link. |
| Enter | Follow the focused link. |
- Both variants keep an underline so the link is distinguishable without color alone.
- The external icon is decorative and does not change the accessible name.
- external does not force a new tab. An explicit target="_blank" adds noopener noreferrer without dropping existing rel values.
- asChild preserves the child destination, native attributes, event handlers and ref.
Cài đặt
npx shadcn add https://werewolf-ui.vercel.app/r/link.jsonLệnh này thêm luôn styles/werewolf.css, bộ token mà mọi component dùng, và các component khác mà nó cần. Import file đó một lần trong CSS gốc, ngay sau @import "tailwindcss", với đường dẫn tính từ file CSS đó (từ app/globals.css là @import "../styles/werewolf.css").