AlertDialog
먼저 보고, 그다음 계약을 읽습니다
되돌릴 수 없는 행동을 확인시키는 경고 모달 (Radix AlertDialog 기반).
Component intent의도와 경계 읽기
Dialog 와 비주얼은 거의 같지만, 사용자가 Cancel 또는 Action 중 하나를 반드시 명시적으로 선택하게 만드는 확인 전용 모달이다. 닫기 X 가 없고 바깥 클릭으로도 닫히지 않으며(Esc 는 Cancel 과 동치), role=alertdialog 로 보조 기술에 '주의' 모달임을 알린다. AlertDialogAction 은 variant="danger" 로 파괴적 확인(삭제·영구취소)에 맞춘 danger 버튼이 되고, AlertDialogCancel 은 ghost 버튼으로 렌더된다. Confirm 용도라 size 기본값이 sm 이며 full/xl 변형은 없다.
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button,} from "@axe/ui";<AlertDialog> <AlertDialogTrigger asChild> <Button variant="danger">삭제</Button> </AlertDialogTrigger> <AlertDialogContent> <AlertDialogHeader> <AlertDialogTitle>문서 3개 영구 삭제</AlertDialogTitle> <AlertDialogDescription> 이 작업은 되돌릴 수 없습니다. </AlertDialogDescription> </AlertDialogHeader> <AlertDialogFooter> <AlertDialogCancel>취소</AlertDialogCancel> <AlertDialogAction variant="danger" onClick={confirmDelete}> 삭제 </AlertDialogAction> </AlertDialogFooter> </AlertDialogContent></AlertDialog><div class="axe-alert-dialog__overlay"></div><div class="axe-alert-dialog__content axe-alert-dialog__content--sm" role="alertdialog" aria-modal="true" aria-labelledby="ad-t"> <div class="axe-alert-dialog__header"> <h2 id="ad-t" class="axe-alert-dialog__title">문서 3개 영구 삭제</h2> <p class="axe-alert-dialog__description">이 작업은 되돌릴 수 없습니다.</p> </div> <div class="axe-alert-dialog__footer"> <button class="axe-btn axe-btn--ghost axe-alert-dialog__cancel">취소</button> <button class="axe-btn axe-btn--danger axe-alert-dialog__action">삭제</button> </div></div>Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
open | boolean | — | — | 열림 상태 (controlled). Radix AlertDialog.Root prop. |
onOpenChange | (open: boolean) => void | — | — | 열림/닫힘 전환 콜백 (Root). |
defaultOpen | boolean | — | false | uncontrolled 초기 열림 상태 (Root). |
size | "sm" | "md" | "lg" | — | "sm" | AlertDialogContent 의 max-width. sm=440 / md=560 / lg=720. Dialog 와 달리 xl/full 없음. |
variant (AlertDialogAction) | "primary" | "danger" | — | "primary" | 확인 버튼 톤. danger 면 axe-btn--danger 로 파괴적 확인에 맞춘 색을 입힌다. |
...rest (AlertDialogContent) | React.ComponentPropsWithoutRef<typeof AlertDialog.Content> | — | — | onEscapeKeyDown 등 Radix Content props 를 전파. |
...rest (Action/Cancel) | 각 Radix AlertDialog.Action / .Cancel props | — | — | onClick·asChild 등 대응 Radix 파트 props 를 그대로 전파. |
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-alert-dialog__overlay | stable | 화면 전체 흐린 backdrop(z-modal). |
.axe-alert-dialog__content | stable | 중앙 정렬 확인 카드 표면. |
.axe-alert-dialog__content--sm | stable | max-width 440px 변형(기본). |
.axe-alert-dialog__content--md | stable | max-width 560px 변형. |
.axe-alert-dialog__content--lg | stable | max-width 720px 변형. |
.axe-alert-dialog__header | stable | title+설명 스택(close X 없어 padding-right 0). |
.axe-alert-dialog__title | stable | 제목(display 폰트·semibold). |
.axe-alert-dialog__description | stable | 결과 설명 문단(secondary 톤). |
.axe-alert-dialog__footer | stable | 우정렬 Cancel|Action 라인(상단 구분선). |
.axe-alert-dialog__action | stable | 확인 버튼 보정(min-width·중앙정렬). axe-btn 위에 얹힘. |
.axe-alert-dialog__cancel | stable | 취소 버튼 보정. axe-btn axe-btn--ghost 위에 얹힘. |
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
- Esc 로 취소(Cancel 과 동치)
- Tab/Shift+Tab 은 콘텐츠 안에서만 순환(포커스 트랩)
- 열릴 때 기본 포커스가 Cancel(안전쪽)로 이동
Radix 가 콘텐츠에 role=alertdialog·aria-modal=true 를 부여하고, AlertDialogTitle 을 aria-labelledby, AlertDialogDescription 을 aria-describedby 로 자동 연결한다. Cancel/Action 은 각각 취소·확정 시맨틱을 가진 버튼이다.
Dialog 와 달리 바깥(오버레이) 클릭으로 닫히지 않아 실수 확정을 막는다. 기본 포커스가 Action 이 아닌 Cancel 에 놓여 파괴적 행동을 안전쪽으로 default 한다. data-state 로 진입/퇴장 애니메이션이 갈리며 prefers-reduced-motion 시 제거된다.