PackagesUIComponentsButtons
IconLinkButton
アイコンのみで構成されるリンクコンポーネント。省スペースなナビゲーションに使用する。
いつ使うか
- アイコンだけで遷移先が十分に伝わるナビゲーションに使用する（ホーム、設定、外部リンク等）
- テーブル行やツールバーなど、スペースが限られた箇所でのページ遷移に使用する
- 見た目はアイコンボタンだが、意味的にはナビゲーションである場合に使用する
いつ使わないか
- アイコンだけでは遷移先が伝わりにくい場合は使わない。
ActionLinkButtonでテキストラベル付きのリンクを使用する - ページ遷移を伴わないアクション（送信、削除等）には使わない。
IconButtonを使用する - インラインのテキストリンクには使わない。テキストリンクコンポーネントを使用する
Usage
import { IconLinkButton } from '@bi-shop-it/ui/icon-link-button';
<IconLinkButton aria-label="ホームへ" href="/" icon="Home" />;UIProviderの設定
IconLinkButton は 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 | 型 | デフォルト | 説明 |
|---|---|---|---|
aria-label | string | — | 必須。スクリーンリーダーに読み上げられるリンクの説明 |
href | string | — | 遷移先のURL |
icon | IconName | — | 表示するアイコン名 |
variant | 'primary' | 'secondary' | 'destructive' | 'ghost' | 'outline' | 'ghost' | ボタンのスタイル |
size | 'sm' | 'md' | 'lg' | 'md' | ボタンのサイズ |
状態
デフォルト
<IconLinkButton aria-label="ホームへ" href="/" icon="Home" />Variants
<IconLinkButton aria-label="ホームへ" href="/" icon="Home" variant="primary" />
<IconLinkButton aria-label="ダウンロード" href="/download" icon="Download" variant="secondary" />
<IconLinkButton aria-label="削除ページへ" href="/delete" icon="Trash2" variant="destructive" />
<IconLinkButton aria-label="詳細を見る" href="/detail" icon="ExternalLink" variant="ghost" />
<IconLinkButton aria-label="設定" href="/settings" icon="Settings" variant="outline" />Size
<IconLinkButton aria-label="設定" href="/settings" icon="Settings" size="sm" variant="outline" />
<IconLinkButton aria-label="設定" href="/settings" icon="Settings" size="md" variant="outline" />
<IconLinkButton aria-label="設定" href="/settings" icon="Settings" size="lg" variant="outline" />IconButton との使い分け
| 基準 | IconButton | IconLinkButton |
|---|---|---|
| 目的 | アクション実行（編集、削除、コピー） | ページ遷移（ホーム、設定、外部リンク） |
| HTML要素 | <button> | <a>（UIProvider経由で next/link 等） |
isLoading | あり | なし |
disabled | あり | なし |
onClick | あり | なし |
href | なし | あり |
アクセシビリティ
コンポーネントが内部で処理すること
<a>要素として描画されるため、スクリーンリーダーがリンクとして認識するaria-labelを<a>要素に付与し、アイコンのみでもアクセシブルネームを提供する
利用者が対応すること
aria-labelに遷移先が明確に伝わるテキストを指定すること（「ホームへ」「設定を開く」等。「リンク」「アイコン」は避ける）- アイコンだけでは遷移先が伝わりにくい場合は、
ActionLinkButtonの使用を検討すること - Tooltip と組み合わせて、ホバー時に遷移先を視覚的にも伝えることを推奨する
関連コンポーネント
IconButton— ページ遷移を伴わないアイコンボタン。アクション実行に使用するActionLinkButton— テキストラベル付きのリンクボタン。遷移先を明示したい場合に使用する