Alert Dialog

중요한 내용을 사용자에게 알리고 응답을 요구하는 모달 다이얼로그입니다.

examples/krds/alert-dialog-demo.tsx

import {
  AlertDialog,
  AlertDialogAction,

설치

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

사용법

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">다이얼로그 보기</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>신청을 취소하시겠습니까?</AlertDialogTitle>
      <AlertDialogDescription>
        취소하면 작성 중인 신청 내용이 저장되지 않습니다.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>취소</AlertDialogCancel>
      <AlertDialogAction>계속</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

구성

다음 조합으로 AlertDialog:

AlertDialog
├── AlertDialogTrigger
└── AlertDialogContent
    ├── AlertDialogHeader
    │   ├── AlertDialogMedia
    │   ├── AlertDialogTitle
    │   └── AlertDialogDescription
    └── AlertDialogFooter
        ├── AlertDialogCancel
        └── AlertDialogAction

예제

기본

제목, 설명, 취소/계속 버튼을 포함한 기본 Alert Dialog입니다.

examples/krds/alert-dialog-basic.tsx

import {
  AlertDialog,
  AlertDialogAction,

작은 크기

size="sm" prop으로 Alert Dialog를 더 작게 만듭니다.

examples/krds/alert-dialog-small.tsx

import {
  AlertDialog,
  AlertDialogAction,

미디어

AlertDialogMedia 컴포넌트로 아이콘이나 이미지 같은 미디어 요소를 Alert Dialog에 추가합니다.

examples/krds/alert-dialog-media.tsx

import { CircleFadingPlusIcon } from "lucide-react"

import {

작은 크기 with Media

size="sm" prop으로 Alert Dialog를 작게 만들고, AlertDialogMedia 컴포넌트로 아이콘이나 이미지 같은 미디어 요소를 추가합니다.

examples/krds/alert-dialog-small-media.tsx

import { BluetoothIcon } from "lucide-react"

import {

위험 작업

AlertDialogAction 컴포넌트로 위험 작업 액션 버튼을 Alert Dialog에 추가합니다.

examples/krds/alert-dialog-destructive.tsx

import { Trash2Icon } from "lucide-react"

import {

RTL

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

examples/krds/alert-dialog-rtl.tsx

"use client"

import * as React from "react"

API 참조

size

AlertDialogContent의 size prop으로 Alert Dialog의 크기를 제어합니다. 다음 값을 사용할 수 있습니다:

속성	타입	기본값
`size`	`"default" \| "sm"`	`"default"`

나머지 컴포넌트와 prop 정보는 Radix UI 문서를 참고하세요.

Alert Aspect Ratio