Groudit UI

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 shadcn@latest add https://groudit.com/r/dialog.json

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

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

WCAG 2.1 AA

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

1.3.12.1.22.4.34.1.2

Notes

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