Alert Dialog
되돌리기 어려운 행동 전에 명시적인 결정을 받습니다.
- 성숙도
- 후보
- 소스 경로
components/ui/alert-dialog.tsx- 소스
- 소스
- 외부 의존성
radix-ui
실제 미리보기
사용할 때
사용 기준
삭제나 권한 변경처럼 결과가 즉시 적용되는 행동에 씁니다.
사용하지 않을 때
일반 안내나 쉽게 되돌릴 수 있는 행동에는 Dialog나 Alert를 씁니다.
변형과 상태
closed고정 예시트리거가 결과를 구체적으로 설명하는지 확인합니다.
open직접 조작취소와 실행의 위계, 초기 초점과 초점 복귀를 확인합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
destructive직접 조작위험 동작은 Error Deep 면과 흰색 글자를 사용합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
접근성
바깥 클릭으로 닫지 않고 취소와 실행을 명확히 제공하며 초점을 복귀합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
variant | "primary" | "destructive" | 아니요 | 확인 동작의 의미입니다. |
children | ReactNode | 아니요 | Header, Body와 Footer를 조합합니다. |
사용 예시
지원 importimport {
AlertDialog,
AlertDialogContent,
AlertDialogBody,
AlertDialogCancel,
AlertDialogAction,
} from "@/components/ui/alert-dialog"
<AlertDialog>
<AlertDialogContent>
<AlertDialogBody>This cannot be undone.</AlertDialogBody>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction variant="destructive">Archive</AlertDialogAction>
</AlertDialogContent>
</AlertDialog>