AlertDialog

ユーザーの確認を必須とするアラートダイアログ。破壊的な操作の確認などに使用。

インストール

import { AlertDialog } from "@ginga-ui/core";

基本的な使い方

破壊的な操作の確認を求めるアラートダイアログです。外側をクリックしても閉じず、明示的な選択を求めます。

export function BasicExample() {
  return (
    <DialogTrigger>
      <Button variant="filled">ファイルを削除</Button>
      <Modal>
        <AlertDialog variant="danger">
          <AlertDialogTitle>ファイルの削除</AlertDialogTitle>
          <p>この操作は取り消せません。本当に削除しますか?</p>
          <div style={{ display: "flex", gap: "0.5rem", marginTop: "1rem" }}>
            <Button slot="close" variant="outline">
              キャンセル
            </Button>
            <Button slot="close" variant="filled">
              削除する
            </Button>
          </div>
        </AlertDialog>
      </Modal>
    </DialogTrigger>
  );
}

警告バリアント

variantプロップでタイトル色とアクセントを変更できます。

export function WarningExample() {
  return (
    <DialogTrigger>
      <Button variant="outline">ログアウト</Button>
      <Modal>
        <AlertDialog variant="warning">
          <AlertDialogTitle>ログアウトの確認</AlertDialogTitle>
          <p>保存されていない変更は失われます。ログアウトしますか?</p>
          <div style={{ display: "flex", gap: "0.5rem", marginTop: "1rem" }}>
            <Button slot="close" variant="outline">
              キャンセル
            </Button>
            <Button slot="close" variant="filled">
              ログアウト
            </Button>
          </div>
        </AlertDialog>
      </Modal>
    </DialogTrigger>
  );
}

バリアントなし

variantを指定しない場合は通常の配色で表示されます。

export function PlainExample() {
  return (
    <DialogTrigger>
      <Button variant="light">利用規約に同意</Button>
      <Modal>
        <AlertDialog>
          <AlertDialogTitle>利用規約の更新</AlertDialogTitle>
          <p>利用規約が更新されました。続行するには同意が必要です。</p>
          <div style={{ display: "flex", gap: "0.5rem", marginTop: "1rem" }}>
            <Button slot="close" variant="outline">
              あとで
            </Button>
            <Button slot="close" variant="filled">
              同意する
            </Button>
          </div>
        </AlertDialog>
      </Modal>
    </DialogTrigger>
  );
}