Dialog
흐름을 잠시 멈추고 짧은 입력이나 확인을 받아요. Esc와 바깥 클릭으로 닫혀요.
변형
Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.
사용법
- 크기와 간격너비 440(좁으면 좌우 space/4를 뺀 너비), padding space/6, 영역 사이 space/4.
- 트리거가 밖에 있으면 제어 모드Menu 항목이나 API 에러 뒤에 열 때는 open과 onOpenChange만 넘겨요.
- 열기/닫기 모션duration/normal, opacity 0 · scale 0.98에서 시작해요. Backdrop은 opacity만 바뀌어요.
Props
| prop | 값 | 기본값 |
|---|---|---|
| open · onOpenChange | 제어 모드 (트리거가 밖에 있을 때) | — |
| DialogPopup | Portal과 Backdrop을 함께 그려요 | — |
| initialFocus | 열릴 때 포커스 위치 | 첫 포커스 요소 |
| finalFocus | 닫힌 뒤 포커스 위치 (코드로 열었다면 필수) | 열기 전 요소 |
코드
tsx
<Dialog>
<DialogTrigger render={<Button />}>API 키 만들기</DialogTrigger>
<DialogPopup>
<DialogTitle>API 키 만들기</DialogTitle>
<DialogDescription>키는 만든 직후 한 번만 보여 줘요.</DialogDescription>
<DialogFooter><DialogClose render={<Button variant="secondary" />}>취소</DialogClose><Button>만들기</Button></DialogFooter>
</DialogPopup>
</Dialog>