PackagesUIComponentsDialogs
ConfirmDialog
確認ダイアログに特化したCompositeコンポーネント。Props駆動で簡潔に使用できる。
いつ使うか
- ユーザーに操作の確認を求めるときに使用する（削除、送信、承認など）
- 確認と同時にローディング状態を表現したいときに使用する
いつ使わないか
- フォーム入力やカスタムレイアウトが必要な場合は使わない。
Dialogを使用する - 単純な通知やメッセージ表示には使わない。
AlertDialogを使用する
Usage
import { ConfirmDialog } from '@bi-shop-it/ui/confirm-dialog';
<ConfirmDialog
confirmLabel="送信"
description="この操作を実行してもよろしいですか？"
title="確認"
trigger={<ActionButton label="実行" />}
onConfirm={() => handleConfirm()}
/>;Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
title | string | — | ダイアログのタイトル |
description | string | — | タイトル下の説明テキスト |
confirmLabel | string | '確認' | 確認ボタンのラベル |
cancelLabel | string | 'キャンセル' | キャンセルボタンのラベル |
variant | 'primary' | 'destructive' | 'primary' | 確認ボタンのスタイル |
onConfirm | () => void | — | 確認ボタンクリック時のコールバック |
isLoading | boolean | false | ローディング状態。閉じる操作を無効化する |
trigger | ReactNode | — | ダイアログを開くトリガー要素 |
children | ReactNode | — | 追加のボディコンテンツ |
open | boolean | — | 外部から開閉を制御する場合に使用する |
onOpenChange | (open: boolean) => void | — | 開閉状態が変化したときのコールバック |
状態
デフォルト
<ConfirmDialog
confirmLabel="送信"
description="この操作を実行してもよろしいですか？"
title="確認"
trigger={<ActionButton label="確認ダイアログを開く" />}
onConfirm={() => {}}
/>Destructive
破壊的操作の確認に使用する。variant="destructive" で確認ボタンが赤系の表示になる。
<ConfirmDialog
confirmLabel="削除する"
description="このアイテムを削除すると元に戻せません。本当に削除しますか？"
title="アイテムの削除"
trigger={<ActionButton label="削除" variant="destructive" />}
variant="destructive"
onConfirm={() => {}}
/>確認対象の詳細表示
children に確認対象の情報を渡すことで、何に対する操作なのかを明示できる。
<ConfirmDialog
confirmLabel="削除する"
description="以下のユーザーを削除します。この操作は取り消せません。"
title="ユーザーの削除"
variant="destructive"
onConfirm={() => handleDelete()}
>
<div className="flex flex-col gap-2 rounded-lg border p-3">
<div className="flex items-center gap-3">
<div className="flex size-9 items-center justify-center rounded-full bg-muted text-sm font-medium">
山
</div>
<div>
<p className="text-sm font-medium">山田太郎</p>
<p className="text-xs text-muted-foreground">[email protected]</p>
</div>
</div>
</div>
</ConfirmDialog>Dialog との使い分け
| 用途 | 使うコンポーネント |
|---|---|
| 確認メッセージ + 確認/キャンセル | ConfirmDialog |
| 削除確認 + ローディング | ConfirmDialog |
| 結果や警告の通知（OKのみ） | AlertDialog |
| フォーム入力を含むダイアログ | Dialog |
| カスタムレイアウトのダイアログ | Dialog |
アクセシビリティ
コンポーネントが内部で処理すること
Dialogと同じアクセシビリティ機能をすべて引き継ぐisLoading時は閉じるボタンとキャンセルボタンを無効化し、操作中の意図しない中断を防止する- ローディング中は
Spinnerがrole="status"でスクリーンリーダーに状態を通知する
利用者が対応すること
titleに操作内容が伝わるテキストを設定すること（「確認」よりも「注文の送信」のように具体的にする）descriptionで操作の影響を説明すること- 破壊的操作には
variant="destructive"を設定し、視覚的に警告すること
関連コンポーネント
Dialog— 汎用ダイアログ。Compound Component パターンで自由にレイアウトを構成できるAlertDialog— 通知ダイアログ。結果や警告をユーザーに伝える