PackagesUIComponentsDialogs Dialog
モーダルダイアログコンポーネント。Compound Componentパターンで柔軟なレイアウトを構成できる。
- ユーザーの注意を集中させ、明示的な操作を求めるときに使用する（フォーム入力、確認、詳細表示など）
- メインコンテンツの文脈を維持しつつ、一時的なサブタスクを実行するときに使用する
- 単純な確認（「本当に削除しますか？」）には使わない。
ConfirmDialog を使用する
- 軽量な補足情報の表示には使わない。
Tooltip や Popover を使用する
- ページ全体を置き換えるコンテンツには使わない。ページ遷移を使用する
import {
Dialog,
DialogBody,
DialogClose,
DialogFooter,
DialogHeader,
} from '@bi-shop-it/ui/dialog';
<Dialog trigger={<ActionButton label="開く" />}>
<DialogHeader title="タイトル" description="説明文" />
<DialogBody>コンテンツ</DialogBody>
<DialogFooter>
<DialogClose>
<ActionButton label="キャンセル" variant="secondary" />
</DialogClose>
<ActionButton label="保存" />
</DialogFooter>
</Dialog>;
| Prop | 型 | デフォルト | 説明 |
|---|
trigger | ReactNode | — | ダイアログを開くトリガー要素 |
children | ReactNode | — | ダイアログの中身（DialogHeader, DialogBody, DialogFooter を配置） |
open | boolean | — | 外部から開閉を制御する場合に使用する |
onOpenChange | (open: boolean) => void | — | 開閉状態が変化したときのコールバック |
size | 'sm' | 'md' | 'lg' | 'md' | ダイアログの横幅 |
| Prop | 型 | デフォルト | 説明 |
|---|
title | string | — | ダイアログのタイトル |
description | string | — | タイトル下の説明テキスト |
hasCloseButton | boolean | true | 閉じるボタンの表示 |
children | ReactNode | — | 追加コンテンツ |
| Prop | 型 | デフォルト | 説明 |
|---|
children | ReactNode | — | スクロール可能なコンテンツ領域 |
| Prop | 型 | デフォルト | 説明 |
|---|
children | ReactNode | — | アクションボタンを配置する領域（右寄せ、gap-2） |
| Prop | 型 | デフォルト | 説明 |
|---|
children | ReactNode | — | クリックでダイアログを閉じる振る舞いを付与 |
<Dialog trigger={<ActionButton label="ダイアログを開く" />}>
<DialogHeader
description="基本的なダイアログの例です。"
title="ダイアログタイトル"
/>
<DialogBody>
<p>ダイアログのコンテンツ領域です。</p>
</DialogBody>
<DialogFooter>
<DialogClose>
<ActionButton label="キャンセル" variant="secondary" />
</DialogClose>
<ActionButton label="保存" />
</DialogFooter>
</Dialog>
DialogBody に任意のフォーム要素を配置できる。
<Dialog trigger={<ActionButton label="フォームを開く" variant="outline" />}>
<DialogHeader
description="プロフィール情報を入力してください。"
title="プロフィール編集"
/>
<DialogBody>
<div className="flex flex-col gap-4">
<input type="text" placeholder="名前" />
<input type="email" placeholder="メールアドレス" />
</div>
</DialogBody>
<DialogFooter>
<DialogClose>
<ActionButton label="キャンセル" variant="secondary" />
</DialogClose>
<ActionButton label="更新" />
</DialogFooter>
</Dialog>
size で横幅を変更できる。sm（max-w-sm）、md（max-w-lg）、lg（max-w-2xl）。
<Dialog size="sm" trigger={<ActionButton label="Small" />}>...</Dialog>
<Dialog size="md" trigger={<ActionButton label="Medium" />}>...</Dialog>
<Dialog size="lg" trigger={<ActionButton label="Large" />}>...</Dialog>
- Radix UI の Dialog プリミティブに基づき、
role="dialog"、aria-modal="true"、aria-labelledby、aria-describedby を自動的に設定する
- Escape キーでダイアログを閉じることができる
- ダイアログ外のクリック（オーバーレイ）でダイアログを閉じることができる
- ダイアログが開いている間、フォーカストラップが有効になる
- ダイアログを閉じると、トリガー要素にフォーカスが戻る
DialogHeader の title にダイアログの目的が伝わるテキストを設定すること- フォーカス可能な要素が少なくとも1つダイアログ内に含まれるようにすること
ConfirmDialog — 確認ダイアログに特化した Composite コンポーネント。Props 駆動で簡潔に使用できる