PackagesUIComponents
TextLink
文章中に埋め込むインラインテキストリンク。外部リンク対応・UIProvider経由のルーティング統合を備える。
いつ使うか
- 文章中のインラインリンクに使用する（「詳しくはドキュメントをご覧ください」等）
- 外部サイトへのリンクに使用する（
isExternalで自動的にtarget="_blank"+ アイコン付与）
いつ使わないか
- ボタン風の見た目でページ遷移させたい場合は使わない。
ActionLinkButtonを使用する - フォーム送信やデータ保存には使わない。
ActionButtonを使用する
Usage
import { TextLink } from '@bi-shop-it/ui/text-link';
<p>
詳しくは<TextLink href="/docs">ドキュメント</TextLink>をご覧ください。
</p>;UIProviderの設定
TextLink は UIProvider から注入されたリンクコンポーネントを使用する。Next.jsの場合は next/link を注入することで、クライアントサイドナビゲーションが有効になる。
// app/layout.tsx
import { UIProvider } from '@bi-shop-it/ui/provider';
import Link from 'next/link';
const RootLayout = ({ children }) => (
<UIProvider linkComponent={Link}>{children}</UIProvider>
);UIProvider を設定しない場合は、通常の <a> タグとして動作する。
Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
children | ReactNode | — | リンクテキスト |
href | string | — | 遷移先のURL |
variant | 'default' | 'muted' | 'default' | リンクのスタイル |
isExternal | boolean | false | 外部リンク。target="_blank" + rel="noopener noreferrer" + ExternalLinkアイコンを自動付与 |
icon | IconName | — | テキスト末尾に表示するアイコン名。isExternal 時は未指定でExternalLinkアイコンが付く |
variant の使い分け
| variant | 用途 | 例 |
|---|---|---|
default | 通常のテキストリンク。本文中で遷移先を示す | 「ドキュメント」「利用規約」 |
muted | 補足情報やフッターなど、控えめに表示したいリンク | 「プライバシーポリシー」「ヘルプ」 |
状態
デフォルト
詳しくはドキュメントをご覧ください。
<p>
詳しくは<TextLink href="/docs">ドキュメント</TextLink>をご覧ください。
</p>Variants
<TextLink href="/docs">default リンク</TextLink>
<TextLink href="/docs" variant="muted">muted リンク</TextLink>外部リンク
isExternal を指定すると、target="_blank"・rel="noopener noreferrer" が付与され、末尾に ExternalLink アイコンが自動表示される。
<TextLink href="https://example.com" isExternal>
外部サイトへ
</TextLink>アイコン付き
icon でアイコンを明示的に指定できる。isExternal 時は未指定でも ExternalLink アイコンが付く。
<TextLink href="/docs" icon="ChevronRight">次のページへ</TextLink>
<TextLink href="https://example.com" isExternal>外部リンク（自動アイコン）</TextLink>ActionLinkButtonとの使い分け
| 基準 | TextLink | ActionLinkButton |
|---|---|---|
| 見た目 | インラインテキスト（下線付き） | ボタン |
| 用途 | 文章中のリンク | ページ遷移アクション |
| 配置 | テキストフロー内 | 独立したUI要素 |
isExternal | あり | なし |
variant | default / muted | primary / secondary / etc. |
アクセシビリティ
コンポーネントが内部で処理すること
- 装飾アイコンに
aria-hidden="true"を自動付与し、スクリーンリーダーから隠す <a>要素として描画されるため、スクリーンリーダーがリンクとして認識するisExternal時にrel="noopener noreferrer"を自動付与する- WCAG準拠: 色だけでなく下線でリンクを識別可能にしている
利用者が対応すること
- リンクテキストは遷移先が明確に伝わる内容にすること（「こちら」「クリック」は避ける）
- 外部リンクの場合は
isExternalを必ず指定すること
関連コンポーネント
ActionLinkButton— ボタン風の見た目でページ遷移を行うActionButton— ページ遷移を伴わないアクション実行に使用する