AlertDialog
사용자의 확인이 필요한 중요한 작업을 처리하는 모달 다이얼로그
개요
AlertDialog 컴포넌트는 base-ui의 AlertDialog Primitive를 기반으로, 삭제 확인이나 되돌릴 수 없는 작업 등 사용자의 명확한 응답이 필요한 상황에서 사용하는 모달 다이얼로그입니다. 일반 Dialog와 달리 다이얼로그가 닫힐 때까지 다른 요소와 상호작용할 수 없습니다.
주요 특징
- ✅ Compound 구조: Trigger, Content, Header, Footer, Title, Description, Action, Cancel 조합
- ✅ 크기 옵션: default, sm 사이즈 지원
- ✅ 포커스 관리: 열릴 때 초기 포커스 자동 이동, 닫히면 트리거로 복귀
- ✅ 오버레이: 배경 클릭 차단 및 블러 효과 지원
- ✅ 애니메이션: 열기/닫기 시 fade 및 zoom 애니메이션 내장
- ✅ 디자인 토큰: CSS 변수 기반 테마 커스터마이징 지원
사용 예시
기본 사용법
삭제 확인과 같은 일반적인 확인 다이얼로그입니다.
Preview
Destructive 액션
위험한 작업에는 destructive 버튼을 사용합니다.
Preview
sm 사이즈
size="sm"을 사용하면 더 작은 다이얼로그를 표시하고, 푸터 버튼이 2열 그리드로 배치됩니다.
Preview
API Reference
AlertDialog (Root)
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | 제어 모드 열림 상태 |
defaultOpen | boolean | - | 비제어 모드 초기 상태 |
onOpenChange | (open: boolean) => void | - | 열림 상태 변경 콜백 |
AlertDialogTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
render | React.ReactNode | - | 렌더링할 요소 (예: <Button />) |
AlertDialogContent
| Prop | Type | Default | Description |
|---|---|---|---|
size | "default" | "sm" | "default" | 다이얼로그 크기 |
zIndex | number | - | 다중 모달 스택 시 z-index 오버라이드 |
className | string | - | 추가 CSS 클래스 |
내부적으로 Portal과 Overlay를 포함하여 렌더링합니다.
AlertDialogHeader / AlertDialogFooter
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | 추가 CSS 클래스 |
AlertDialogTitle / AlertDialogDescription
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | 추가 CSS 클래스 |
AlertDialogAction
Button 컴포넌트의 모든 props를 지원합니다.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | string | - | Button variant |
className | string | - | 추가 CSS 클래스 |
AlertDialogCancel
| Prop | Type | Default | Description |
|---|---|---|---|
variant | string | "outline" | Button variant |
size | string | "md" | Button size |
className | string | - | 추가 CSS 클래스 |
클릭 시 다이얼로그를 닫는 Close 역할을 하며 Button으로 렌더링됩니다.
기본 사용법
import {
AlertDialog,
AlertDialogTrigger,
AlertDialogContent,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogAction,
AlertDialogCancel,
} from "@vortex/ui-foundation"
<AlertDialog>
<AlertDialogTrigger render={<Button />}>열기</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>제목</AlertDialogTitle>
<AlertDialogDescription>설명</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>취소</AlertDialogCancel>
<AlertDialogAction>확인</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>접근성
base-ui AlertDialog 기반
role="alertdialog"가 자동 적용되어 일반 다이얼로그와 구분됩니다- 다이얼로그가 열리면 포커스가 다이얼로그 내부로 이동하고, 닫히면 트리거로 복귀합니다
- Title과 Description이
aria-labelledby,aria-describedby로 자동 연결됩니다
키보드 인터랙션
| 키 | 동작 |
|---|---|
Esc | 다이얼로그 닫기 |
Tab | 다이얼로그 내부 포커스 순환 |
권장 사항
- ✅ 되돌릴 수 없는 작업(삭제, 초기화 등) 확인에 사용
- ✅ Action 버튼에 작업 결과가 명확히 드러나는 라벨 사용 (예: “삭제”, “로그아웃”)
- ❌ 단순 정보 전달에는 사용하지 않기 (Alert 사용)
관련 컴포넌트
Last updated on