Feedback

Dialog

모달 다이얼로그 — 사용자 결정·확인이 필요한 흐름.

Compound: Trigger / Content / Header / Title / Description / Footer / Close. Radix Dialog 기반 — focus trap, ESC, overlay 클릭 닫기 모두 표준.

import { Dialog } from "@nxtgen-org/react";

Basic

Confirm 패턴

tsx

1<Dialog>
2  <Dialog.Trigger asChild>
3    <Button variant="danger" leftIcon={<Trash2 size={16} />}>삭제</Button>
4  </Dialog.Trigger>
5  <Dialog.Content>
6    <Dialog.Header>
7      <Dialog.Title>정말 삭제하시겠습니까?</Dialog.Title>
8      <Dialog.Description>영구 삭제됩니다.</Dialog.Description>
9    </Dialog.Header>
10    <Dialog.Footer>

API

Name	Type	Default	Description
Dialog	Radix Dialog Root	—	—
Dialog.Trigger	Radix Trigger	—	—
Dialog.Content	Radix Content + hideCloseButton?: boolean	—	—
Dialog.Header / Title / Description / Footer / Close	—	—	—