Dialog

기본 화면 위에 겹쳐 표시되어 아래 콘텐츠를 비활성화하는 다이얼로그입니다.

examples/krds/dialog-demo.tsx

import { Button } from "@/components/ui/button"
import {
  Dialog,

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/dialog.json

사용법

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

<Dialog>
  <DialogTrigger>열기</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>신청 정보를 수정하시겠습니까?</DialogTitle>
      <DialogDescription>
        저장 버튼을 선택하면 입력한 신청인 정보가 반영됩니다.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

KRDS 정렬

분류: Radix/shadcn Dialog compound API를 유지하는 KRDS-styled modal 컴포넌트입니다. DialogTrigger, DialogContent, DialogHeader, DialogFooter 조합은 기존 shadcn 패턴과 호환됩니다.
KRDS 적용: modal 크기, dim overlay, rounded surface, header/body/footer spacing, close affordance가 KRDS dialog 기준에 맞춰 조정되어 있습니다.
사용 권장: destructive 확인 흐름은 Alert Dialog를, 일반 정보 입력/확인 흐름은 Dialog를 사용해 의미를 분리하세요.

구성

다음 조합으로 Dialog:

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

예제

사용자 지정 닫기 버튼

기본 닫기 컨트롤을 서비스 문맥에 맞는 버튼으로 교체합니다.

examples/krds/dialog-close-button.tsx

import { Button } from "@/components/ui/button"
import {
  Dialog,

닫기 버튼 없음

showCloseButton={false}로 닫기 버튼을 숨깁니다.

examples/krds/dialog-no-close-button.tsx

import { Button } from "@/components/ui/button"
import {
  Dialog,

고정 푸터

콘텐츠가 스크롤되어도 하단 액션 영역을 계속 보이게 유지합니다.

examples/krds/dialog-sticky-footer.tsx

import { Button } from "@/components/ui/button"
import {
  Dialog,

스크롤 콘텐츠

긴 콘텐츠는 헤더를 유지한 상태로 본문만 스크롤할 수 있습니다.

examples/krds/dialog-scrollable-content.tsx

import { Button } from "@/components/ui/button"
import {
  Dialog,

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

examples/krds/dialog-rtl.tsx

"use client"

import {

API 참조

Radix UI API 문서를 참고하세요.

Context Menu Direction