Neumorphism UI
アクションとオーバーレイ@neumorphism-ui/alert-dialog

Alert Dialog

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

@neumorphism-ui/alert-dialog
Registry JSON

プレビュー

インストール

インストール: alert-dialognpx shadcn@latest add @neumorphism-ui/alert-dialog

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定 を完了してください。

使い方

使い方: インストールnpx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/alert-dialog

Import

Alert Dialog の import コード
"use client";

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

Example

Alert Dialog の使用コード
export default function Example() {
  const [message, setMessage] = React.useState("");
  return (<div className="grid gap-3"><AlertDialog><AlertDialogTrigger render={<Button variant="destructive" />}>{"下書きを削除"}</AlertDialogTrigger><AlertDialogContent><AlertDialogTitle>{"下書きを削除しますか？"}</AlertDialogTitle><AlertDialogDescription>{"この操作は取り消せません。確認してから続行してください。"}</AlertDialogDescription><AlertDialogFooter><AlertDialogCancel>{"戻る"}</AlertDialogCancel><AlertDialogAction onClick={() => setMessage("下書きを削除しました。")}>{"下書きを削除"}</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog><p role="status" className="text-sm text-[var(--muted-foreground)]">{message}</p></div>);
}

API リファレンス

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

アクセシビリティ

  • 01

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

  • 02

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