# 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.

## 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.

Giá trị: `default`, `subtle`. Mặc định: `default`.

## Ví dụ

### Inline navigation

```tsx
<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

```tsx
<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.

```tsx
<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

```bash
npx shadcn add https://werewolf-ui.vercel.app/r/link.json
```

Lệ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"`).