kaze風
Link
文中に置くリンク。外部サイトへは external で新しいタブと ↗ を付ける。
プレビュー
請求書の発行方法は請求書の設定で変更できます。詳しくはヘルプセンター（新しいタブで開きます）を見てください。
使いどころ
使う場面
- 文章の中に置く、ほかのページや外部サイトへの移動（「請求書の設定」「ヘルプセンター」）
- 別サイトへ出るときは external を付ける。新しいタブで開き、末尾に ↗ が付く
- Next.js の Link など、すでにルーティング用の要素があるときは asChild で包む。見た目と下線だけをそちらに渡せる
使わない場面
- ページ内で何かを実行する操作。Button を使う。ボタンの見た目で移動させたいときは Button に asChild で <a> を包む
- ナビゲーションメニューの項目。Sidebar や Navbar を使う
- 本文と見分けがつかない装飾。リンクは下線で示す形のままにし、下線を消さない
使い方
<Link href="/settings">請求書の設定</Link>
<Link href="https://example.com" external>ヘルプセンター</Link>
<Link asChild>
<a href="/help">ヘルプ</a>
</Link>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
asChild | boolean | false | 子要素にスタイルと振る舞いを委ねる |
external | boolean | false | 新しいタブで開き、末尾に ↗ を付ける |
externalLabel | string | "（新しいタブで開きます）" | external のときの読み上げ文言 |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
キーボード操作
| キー | 動作 |
|---|---|
| Tab | リンクにフォーカスを移す |
| Enter | リンク先へ移動する（external のときは新しいタブで開く） |
アクセシビリティ
- <a> をそのまま描画するので、リンクとして読み上げられる。href を必ず付ける
- external のときは ↗ は aria-hidden で読み上げず、代わりに「（新しいタブで開きます）」が続けて読み上げられる。文言は externalLabel で差し替えられる
- 色ではなく下線でリンクだとわかる。フォーカスのときはリングが出る
文言
- リンク文字は移動先がわかる名詞か動詞で書く（「請求書の設定」）。「こちら」「詳しくはここ」にしない
- 文の途中に置くときは、リンク文字だけで意味が通る長さにする