Neumorphism UI

Alert Dialog

元に戻しにくい操作など、実行前に明示的な確認が必要な場合に使います。

プレビュー

下書き削除の確認

明示的に削除を選んだ後に実行し、閉じた後でローカルの結果を表示します。

プレビューを読み込んでいます。

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

npx shadcn@latest add @neumorphism-ui/alert-dialog

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

下書き削除の確認

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/alert-dialog
Registry JSON

使い方

タイトルと説明で結果を伝え、キャンセルと実行を分けます。操作はダイアログを開く処理ではなく、確認ボタンに接続します。

"use client";

import { useState } from "react";
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";

export default function Example() {
  const [deleted, setDeleted] = useState(false);
  return (
    <div>
      <AlertDialog>
        <AlertDialogTrigger render={<Button variant="destructive" />}>Delete draft</AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogTitle>Delete this draft?</AlertDialogTitle>
          <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={() => setDeleted(true)}>Delete</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
      <p role="status">{deleted ? "Draft deleted." : "Draft available."}</p>
    </div>
  );
}

API リファレンス

取り消せない操作を明示的に確認するダイアログ。 取消を先に配置してください。非同期処理では成功後に制御されたダイアログを閉じます。

コンポーネントプロパティ型デフォルト説明
AlertDialogopen / defaultOpenboolean—制御状態または初期状態を指定します。
AlertDialogContentinitialFocusboolean | React.RefObject | function—開いた時のフォーカス対象を指定します。
AlertDialogActiononClickReact.MouseEventHandler—同期確認を処理します。非同期処理では状態を制御します。

アクセシビリティ

  • 01

    取消を先に配置してください。非同期処理では成功後に制御されたダイアログを閉じます。

  • 02

    render や className を変更する際もラベルと可視フォーカスを保ちます。