ActionLinkButton

ページ遷移を伴うアクションに使用するリンクコンポーネント。見た目はActionButton、機能はリンクとして動作する。

いつ使うか

ページ遷移を伴うアクションに使用する（「次へ」「ダッシュボードへ」「一覧に戻る」等）
見た目はボタンだが、意味的にはナビゲーションである場合に使用する
variant で視覚的な重要度を使い分ける

いつ使わないか

フォーム送信やデータ保存など、ページ遷移を伴わないアクションには使わない。ActionButton を使用する
インラインのテキストリンクには使わない。テキストリンクコンポーネントを使用する
外部サイトへのリンクには使わない。テキストリンクに ExternalLink アイコンを添えるのが適切である

Usage

import { ActionLinkButton } from '@bi-shop-it/ui/action-link-button';

<ActionLinkButton href="/dashboard" label="ダッシュボードへ" />
<ActionLinkButton href="/list" label="一覧に戻る" variant="secondary" />

UIProviderの設定

ActionLinkButton は 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	型	デフォルト	説明
`href`	`string`	—	遷移先のURL
`label`	`string`	—	ボタンに表示するテキスト
`variant`	`'primary' \| 'secondary' \| 'destructive' \| 'ghost' \| 'outline'`	`'primary'`	ボタンのスタイル
`icon`	`IconName`	—	ラベルに併せて表示するアイコン名
`iconPosition`	`'start' \| 'end'`	`'start'`	アイコンの表示位置
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	ボタンのサイズ

variant の使い分け

variant	用途	例
`primary`	画面内で最も重要な遷移先。1画面に1つが原則	ダッシュボードへ、次へ
`secondary`	副次的な遷移。primary と並べて使う	一覧に戻る、キャンセル
`destructive`	破壊的操作の確認ページへの遷移	削除ページへ
`ghost`	控えめなナビゲーション	詳細を見る
`outline`	枠線のみのナビゲーション	オプション

状態

Variants

ダッシュボードへ一覧に戻る削除ページへ詳細オプション

<ActionLinkButton href="/dashboard" label="ダッシュボードへ" variant="primary" />
<ActionLinkButton href="/list" label="一覧に戻る" variant="secondary" />
<ActionLinkButton href="/delete" label="削除ページへ" variant="destructive" />
<ActionLinkButton href="/detail" label="詳細" variant="ghost" />
<ActionLinkButton href="/options" label="オプション" variant="outline" />

With Icon

icon にアイコン名を文字列で指定する。iconPosition でアイコンの位置を変更できる。

ホームへ次へ

<ActionLinkButton href="/" icon="Home" label="ホームへ" />
<ActionLinkButton href="/next" icon="ChevronRight" iconPosition="end" label="次へ" />

Size

小中大

<ActionLinkButton href="/docs" label="小" size="sm" />
<ActionLinkButton href="/docs" label="中" size="md" />
<ActionLinkButton href="/docs" label="大" size="lg" />

ActionButtonとの使い分け

基準	ActionButton	ActionLinkButton
目的	アクション実行（送信、保存）	ページ遷移（次へ、ダッシュボードへ）
HTML要素	`<button>`	`<a>`（UIProvider経由で `next/link` 等）
`isLoading`	あり	なし
`disabled`	あり	なし
`onClick`	あり	なし
`href`	なし	あり

アクセシビリティ

コンポーネントが内部で処理すること

装飾アイコンに aria-hidden="true" を自動付与し、スクリーンリーダーから隠す
<a> 要素として描画されるため、スクリーンリーダーがリンクとして認識する

利用者が対応すること

ラベルは遷移先が明確に伝わるテキストにすること（「次へ」「ダッシュボードへ」等。「クリック」は避ける）
同一ページ内のアクションには使わないこと。ページ遷移を伴わない操作は ActionButton を使う