행동과 오버레이@neumorphism-ui/alert-dialog

Alert Dialog

되돌릴 수 없는 작업을 명시적으로 확인하는 대화상자. Cancel을 먼저 배치하세요. 비동기 작업은 성공 후 controlled 상태를 닫으세요.

@neumorphism-ui/alert-dialog

Registry JSON

미리보기

설치

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

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/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

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 레퍼런스

컴포넌트	속성	타입	기본값	설명
`AlertDialog`	`open / defaultOpen`	`boolean`	`—`	제어 상태 또는 최초 상태를 지정합니다.
`AlertDialogContent`	`initialFocus`	`boolean \| React.RefObject \| function`	`—`	열릴 때 포커스를 받을 요소를 지정합니다.
`AlertDialogAction`	`onClick`	`React.MouseEventHandler`	`—`	확인 버튼의 동기 동작입니다. 비동기 저장에는 controlled 상태를 사용하세요.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성