Dialog

Stablev1.0.0

사용자 주의를 끌어 추가 정보·확인을 받는 모달.

Loading preview…

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";

<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>
    Edit profile
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>
        프로필 정보를 변경합니다.
      </DialogDescription>
    </DialogHeader>
    ...
    <DialogFooter>
      <Button type="submit">Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Installation

pnpm dlx @groudit/cli@latest add dialog

Variants

Destructive confirm

위험 작업 확인 — 경고 아이콘 + Cancel / Deactivate 액션.

Loading…

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";

<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>
    Edit profile
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>
        프로필 정보를 변경합니다.
      </DialogDescription>
    </DialogHeader>
    ...
    <DialogFooter>
      <Button type="submit">Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Success (single action)

완료 안내 — 중앙 정렬 체크 아이콘 + 단일 액션 버튼.

Loading…

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";

<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>
    Edit profile
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>
        프로필 정보를 변경합니다.
      </DialogDescription>
    </DialogHeader>
    ...
    <DialogFooter>
      <Button type="submit">Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Composition

Dialog
├── DialogTrigger
└── DialogContent
    ├── DialogHeader
    │   ├── DialogTitle
    │   └── DialogDescription
    └── DialogFooter

Accessibility

이 컴포넌트는 WAI-ARIA dialog 패턴을 따릅니다.

Keyboard interactions

Key	Description
`EnterSpace`	트리거에서 다이얼로그 열기.
`Tab`	다이얼로그 내부에서만 순환 (focus trap).
`Esc`	다이얼로그 닫기 + 트리거로 포커스 복귀.

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.

1.3.1 2.1.2 2.4.3 4.1.2

Notes

•DialogTitle 필수 — 스크린리더가 다이얼로그를 식별.

import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { Button } from "@/components/ui/button"; <Dialog> <DialogTrigger render={<Button variant="outline" />}> Edit profile </DialogTrigger> <DialogContent> <DialogHeader> <DialogTitle>Edit profile</DialogTitle> <DialogDescription> 프로필 정보를 변경합니다. </DialogDescription> </DialogHeader> ... <DialogFooter> <Button type="submit">Save changes</Button> </DialogFooter> </DialogContent> </Dialog>

Variants

Destructive confirm

위험 작업 확인 — 경고 아이콘 + Cancel / Deactivate 액션.

Loading…

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";

<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>
    Edit profile
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>
        프로필 정보를 변경합니다.
      </DialogDescription>
    </DialogHeader>
    ...
    <DialogFooter>
      <Button type="submit">Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Success (single action)

완료 안내 — 중앙 정렬 체크 아이콘 + 단일 액션 버튼.

Loading…

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";

<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>
    Edit profile
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>
        프로필 정보를 변경합니다.
      </DialogDescription>
    </DialogHeader>
    ...
    <DialogFooter>
      <Button type="submit">Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Composition

Dialog
├── DialogTrigger
└── DialogContent
    ├── DialogHeader
    │   ├── DialogTitle
    │   └── DialogDescription
    └── DialogFooter

Accessibility

이 컴포넌트는 WAI-ARIA dialog 패턴을 따릅니다.

Keyboard interactions

Key	Description
`EnterSpace`	트리거에서 다이얼로그 열기.
`Tab`	다이얼로그 내부에서만 순환 (focus trap).
`Esc`	다이얼로그 닫기 + 트리거로 포커스 복귀.

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.

1.3.1 2.1.2 2.4.3 4.1.2

Notes

•DialogTitle 필수 — 스크린리더가 다이얼로그를 식별.