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

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

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

미리보기

초안 삭제 확인

설치

사용법

API 레퍼런스

접근성