AlertDialog

通知ダイアログに特化したCompositeコンポーネント。結果や警告をユーザーに伝える。

いつ使うか

操作の完了や結果をユーザーに通知するときに使用する（「保存しました」「送信完了」など）
エラーや警告をユーザーに伝え、確認を求めるときに使用する（「権限がありません」「セッション切れ」など）

いつ使わないか

ユーザーに判断を求める場合は使わない。ConfirmDialog を使用する
一時的な軽量通知には使わない。Toast を使用する
フォーム入力やカスタムレイアウトが必要な場合は使わない。Dialog を使用する

Usage

import { AlertDialog } from '@bi-shop-it/ui/alert-dialog';

<AlertDialog
  description="データの保存が完了しました。"
  title="保存完了"
  trigger={<ActionButton label="保存" />}
/>;

Props

Prop	型	デフォルト	説明
`title`	`string`	—	ダイアログのタイトル
`description`	`string`	—	タイトル下の説明テキスト
`buttonLabel`	`string`	`'OK'`	ボタンのラベル
`variant`	`'default' \| 'destructive'`	`'default'`	ボタンのスタイル
`trigger`	`ReactNode`	—	ダイアログを開くトリガー要素
`children`	`ReactNode`	—	追加のボディコンテンツ
`open`	`boolean`	—	外部から開閉を制御する場合に使用する
`onOpenChange`	`(open: boolean) => void`	—	開閉状態が変化したときのコールバック

状態

デフォルト

<AlertDialog
  description="データの保存が完了しました。"
  title="保存完了"
  trigger={<ActionButton label="通知を表示" />}
/>

Destructive

エラーや警告の通知に使用する。variant="destructive" でボタンが赤系の表示になる。

<AlertDialog
  buttonLabel="閉じる"
  description="この操作を実行する権限がありません。管理者にお問い合わせください。"
  title="権限エラー"
  variant="destructive"
/>

ConfirmDialog との使い分け

シナリオ	使うコンポーネント
結果の通知（OK のみ）	`AlertDialog`
エラー・警告の通知	`AlertDialog`
操作の確認（確認/キャンセル）	`ConfirmDialog`
破壊的操作の確認	`ConfirmDialog`