kaze風
Dialog
ダイアログ
プレビュー
使いどころ
使う場面
- 削除や解約など、取り消せない操作の確認。続ける前に必ず判断してほしいとき
- 短い入力を求めて、終わるまで背景の操作を止めたいとき（名前の変更、招待の送信）
- open と onOpenChange で制御する。DialogHeader / DialogTitle / DialogBody / DialogFooter の順に組む
使わない場面
- 操作の結果を伝えるだけ。Toast を使う（Dialog は操作を止めて判断を求めるときのもの）
- 画面に残しておく注意や説明。Alert を使う
- 一覧を見ながら詳細を編集したいとき。Drawer を使う
- 補足の説明やちょっとした設定。Tooltip、Popover、HelpButton を使う（Dialog を重ねるのも避け、手順を分けるか画面遷移にする）
使い方
<Dialog open={isOpen} onOpenChange={setOpen} title="確認">
<p>本当に削除しますか？</p>
</Dialog>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
open必須 | boolean | なし | ダイアログの表示状態 |
onOpenChange | (open: boolean) => void | なし | 開閉が変わる時のコールバック。Escape・背景クリック・閉じるボタンで false が渡る（旧 onClose） |
title | string | なし | ダイアログのタイトル |
children | React.ReactNode | なし | ダイアログの内容 |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
キーボード操作
| キー | 動作 |
|---|---|
| Tab / Shift + Tab | Dialog 内の操作に順にフォーカスを移す。端では反対側に回り、外には出ない |
| Escape | onOpenChange(false) を呼ぶ。重なっているときは最前面だけ閉じる |
アクセシビリティ
- role="dialog" と aria-modal="true" が付き、aria-labelledby は DialogTitle に自動でつながる。DialogTitle を必ず置く
- 開くと最初のフォーカスできる要素にフォーカスが移り、背景は inert になって読み上げ・操作の対象外になる。閉じると開いた要素にフォーカスが戻る
- 背景のスクロールは止まる。背景クリックでも閉じるので、入力途中のものがあるときは onOpenChange 側で確認する
- 閉じる処理は呼び出し側が持つ。onOpenChange(false) を受けて open を false にしないと閉じない
文言
- DialogTitle は何をするかを問いで書く（「このプロジェクトを削除しますか」）
- ボタンは問いに対応する動詞にする。「削除する」と「キャンセル」。「OK」「はい」は使わない
- 本文は影響を 1〜2 文で書く。取り消せないときはそれを明記する