Alert Dialog
설치 확인되돌릴 수 없는 작업 확인
1. 목적과 출처
되돌릴 수 없는 작업 확인
- 출처
- shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
- 프로젝트
src/components/ui/alert-dialog.tsx- Registry
@adcapsule/alert-dialog
2. 프리뷰와 변형
오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.
| size | 열어 보기 |
|---|---|
| 기본 default | |
| 작게 + 아이콘 size="sm" |
3. 속성 바꿔 보기
열어 보세요
size
4. 설치와 사용
- npm 패키지
- @base-ui/react
- 함께 설치
- @adcapsule/button, @adcapsule/utils
처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결
5. 바꿔도 되는 것과 유지할 토큰
제품에서 바꿔도 되는 것
- size: default·sm
- AlertDialogMedia로 아이콘
- AlertDialogAction은 스스로 닫지 않음: 작업 후 open을 false로
- 바깥을 눌러도 닫히지 않는다(Dialog와 다름)
공통으로 유지할 토큰
- surface.raised (창, --popover)
- surface.scrim (배경막)
- radius.xl (창 16px)
- status.danger (위험 버튼)