AlertDialog
되돌릴 수 없는 동작 전에만 확인을 받아요. 바깥을 눌러도 닫히지 않아요(Esc는 닫혀요).
변형
Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.
사용법
- 제목은 질문, 설명은 결과"API 키를 삭제할까요?" / "이 키로 보내는 요청이 바로 실패해요."
- 확인 버튼은 동작 이름 그대로danger 버튼에 "삭제"처럼 써요. "확인"은 쓰지 않아요.
Props
| prop | 값 | 기본값 |
|---|---|---|
| open · onOpenChange | 제어 모드 | — |
| AlertDialogClose | 취소 버튼 (secondary) | — |
| initialFocus | 위험한 확인 버튼 대신 취소에 둘 수 있어요 | 첫 포커스 요소 |
코드
tsx
<AlertDialog>
<AlertDialogTrigger render={<Button variant="danger" />}>삭제</AlertDialogTrigger>
<AlertDialogPopup>
<AlertDialogTitle>API 키를 삭제할까요?</AlertDialogTitle>
<AlertDialogDescription>이 키로 보내는 요청이 바로 실패해요.</AlertDialogDescription>
<AlertDialogFooter><AlertDialogClose render={<Button variant="secondary" />}>취소</AlertDialogClose><Button variant="danger" onClick={remove}>삭제</Button></AlertDialogFooter>
</AlertDialogPopup>
</AlertDialog>