確認ダイアログAlertDialogExperimental

削除や破棄など、重要な操作の前に明示的な確認を求めるモーダルダイアログです。

プレビュー

状態とバリエーション

破壊的操作の確認

削除など取り消せない操作は、起点のボタンと確定操作の両方を destructive にします。

未保存変更のガード

ページ遷移や破棄の前に、ユーザーが意図を確認する必要がある場面に使います。

権限が必要な操作

実行できない操作は、理由と次の行動を確認ダイアログで明示します。

対象情報付きの削除確認

削除対象を明示し、ユーザーがどのデータに影響するか確認できるようにします。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
openboolean-開閉状態を外部で制御します。
onOpenChange(open: boolean) => void-開閉状態が変わった時に呼び出されます。
portalContainerHTMLElement | null-プレビュー枠や疑似ブラウザ内に閉じ込めたい場合のポータル先です。

使い方

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
  Button,
  buttonVariants,
  cn,
} from "@gunjo/ui";
import { IconTrash as Trash2 } from "@tabler/icons-react";

export function DeleteProjectDialog() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="destructive" className="gap-2">
          <Trash2 className="h-4 w-4" />
          プロジェクトを削除
        </Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>このプロジェクトを削除しますか？</AlertDialogTitle>
          <AlertDialogDescription>
            関連するタスク、ファイル、共有リンクも削除されます。この操作は取り消せません。
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>キャンセル</AlertDialogCancel>
          <AlertDialogAction className={cn(buttonVariants({ variant: "destructive" }))}>
            削除
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

使用コンポーネント

ButtonDialog

関連コンポーネント

DialogToast

設計の判断（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

UIコンポーネント: AlertDialog誤操作を防ぐ (Error Prevention)防衛的デザイン (Defensive Design)