Alert Dialog

Newv0.3.0

重要なアクションの確認を求めるモーダルダイアログ。ユーザーが明示的に選択するまで閉じることができません。

基本的な使い方

確認ダイアログの基本パターン

tsx

<class="token tag">AlertDialog>
  <class="token tag">div q:slot=class="token keyword">class="token string">"trigger">
    <class="token tag">Button>ダイアログを開く</class="token tag">Button>
  </class="token tag">div>
  <class="token tag">AlertDialogHeader>
    <class="token tag">AlertDialogTitle>本当によろしいですか？</class="token tag">AlertDialogTitle>
    <class="token tag">AlertDialogDescription>
      この操作は取り消すことができません。
    </class="token tag">AlertDialogDescription>
  </class="token tag">AlertDialogHeader>
  <class="token tag">span q:slot=class="token keyword">class="token string">"cancel">キャンセル</class="token tag">span>
  <class="token tag">span q:slot=class="token keyword">class="token string">"action">続行</class="token tag">span>
</class="token tag">AlertDialog>

削除確認

破壊的アクションの確認

ログアウト確認

セッション終了の確認

Dialog との違い

通常のDialogとAlertDialogの使い分け

使い分けのポイント

AlertDialog

重要なアクションの確認が必要な場合に使用。背景クリックでは閉じず、ユーザーは必ず選択を行う必要があります。

Dialog

フォーム入力や情報表示など、一般的なモーダル用途に使用。背景クリックやEscキーで閉じることができます。

Props API

Prop	Type	Default	Description
`open`	`boolean`	-	開閉状態（制御モード）
`onOpenChange$`	`(open: boolean) => void`	-	状態変更時のコールバック

Accessibility

role='alertdialog' を使用（通常の dialog より高い重要度を示す）
背景クリックでは閉じない（ユーザーは選択を強制される）
Escape キーでは閉じない
開くとアクションボタンにフォーカスが移動
Tab キーでフォーカスがダイアログ内に制限される