Alert Dialog

사용자의 확인이 반드시 필요한 경우 강력한 표현 및 경고 수단으로 활용하는 컴포넌트예요.

Dialog

작업 수행, 정보 조회, 폼 입력처럼 사용자가 콘텐츠와 상호작용해야 한다면 Dialog를 사용해요.

설치

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/alert-dialog.json

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/alert-dialog.json

radix-ui, class-variance-authority 를 설치하고, Action Button 을 먼저 추가한 뒤 아래 코드를 components/ui/alert-dialog.tsx 에 복사해요.

components/ui/alert-dialog.tsx

/** * @title Alert Dialog * @description 사용자의 확인이 반드시 필요한 경우 강력한 표현 및 경고 수단으로 활용하는 컴포넌트예요. */'use client';import * as React from 'react';import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';import { cva, type VariantProps } from 'class-variance-authority';import { cn } from '@/lib/utils';import { ActionButton, type ActionButtonProps } from '@/components/ui/action-button';// SEED Rootage spec: alert-dialog.yamlfunction AlertDialog(props: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;}function AlertDialogTrigger(props: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;}function AlertDialogPortal(props: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;}interface AlertDialogOverlayProps extends React.ComponentProps<typeof AlertDialogPrimitive.Overlay> {  /** enter/exit 애니메이션을 건너뛰어요. */  skipAnimation?: boolean;}function AlertDialogOverlay({ className, skipAnimation = false, ...props }: AlertDialogOverlayProps) {  return (    <AlertDialogPrimitive.Overlay      data-slot="alert-dialog-overlay"      className={cn(        'fixed inset-0 z-50 bg-bg-overlay',        !skipAnimation && [          'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:duration-(--rb-duration-d2) data-[state=open]:ease-enter',          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:duration-(--rb-duration-d2) data-[state=closed]:ease-exit',        ],        className,      )}      {...props}    />  );}interface AlertDialogContentProps extends React.ComponentProps<typeof AlertDialogPrimitive.Content> {  /** enter/exit 애니메이션을 건너뛰어요. */  skipAnimation?: boolean;}function AlertDialogContent({ className, skipAnimation = false, children, ...props }: AlertDialogContentProps) {  return (    <AlertDialogPortal>      <AlertDialogOverlay skipAnimation={skipAnimation} />      <AlertDialogPrimitive.Content        data-slot="alert-dialog-content"        className={cn(          'fixed top-1/2 left-1/2 z-50 flex -translate-x-1/2 -translate-y-1/2 flex-col break-all outline-none',          'w-[calc(100%-var(--rb-dimension-x16))] max-w-[272px] max-h-[calc(100dvh-var(--rb-dimension-x16))] overflow-y-auto',          'rounded-r5 bg-bg-layer-floating',          !skipAnimation && [            'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-130 data-[state=open]:duration-(--rb-duration-d4) data-[state=open]:ease-enter-expressive',            'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:duration-(--rb-duration-d2) data-[state=closed]:ease-exit',          ],          className,        )}        {...props}      >        {children}      </AlertDialogPrimitive.Content>    </AlertDialogPortal>  );}function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {  return (    <div      data-slot="alert-dialog-header"      className={cn('flex flex-col gap-x1_5 px-x5 pt-x5', className)}      {...props}    />  );}function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {  return (    <AlertDialogPrimitive.Title      data-slot="alert-dialog-title"      className={cn('m-0 text-t7 font-bold text-fg-neutral', className)}      {...props}    />  );}function AlertDialogDescription({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {  return (    <AlertDialogPrimitive.Description      data-slot="alert-dialog-description"      className={cn('m-0 whitespace-pre-wrap text-t5 font-regular text-fg-neutral', className)}      {...props}    />  );}// SEED ResponsivePair 동작: 두 버튼이 한 줄에 들어가지 않으면 wrap-reverse 로 세로 배치돼요.const alertDialogFooterVariants = cva('flex px-x5 pt-x4 pb-x5', {  variants: {    layout: {      responsive:        'flex-row flex-wrap-reverse content-stretch gap-x2 *:min-w-[calc(50%-var(--rb-dimension-x2)/2)] *:grow',      vertical: 'flex-col items-stretch gap-x2',    },  },  defaultVariants: {    layout: 'responsive',  },});interface AlertDialogFooterProps extends React.ComponentProps<'div'>, VariantProps<typeof alertDialogFooterVariants> {}function AlertDialogFooter({ className, layout, ...props }: AlertDialogFooterProps) {  return (    <div      data-slot="alert-dialog-footer"      data-layout={layout ?? 'responsive'}      className={cn(alertDialogFooterVariants({ layout }), className)}      {...props}    />  );}type AlertDialogActionProps = ActionButtonProps;/** 다이얼로그를 닫는 주요 액션 버튼이에요. Action Button 의 모든 속성을 받아요. */function AlertDialogAction({ variant = 'neutralSolid', ...props }: AlertDialogActionProps) {  return (    <AlertDialogPrimitive.Action asChild>      <ActionButton data-slot="alert-dialog-action" variant={variant} {...props} />    </AlertDialogPrimitive.Action>  );}/** 취소 버튼이에요. 열릴 때 기본으로 포커스를 받아요. */function AlertDialogCancel({ variant = 'neutralWeak', ...props }: AlertDialogActionProps) {  return (    <AlertDialogPrimitive.Cancel asChild>      <ActionButton data-slot="alert-dialog-cancel" variant={variant} {...props} />    </AlertDialogPrimitive.Cancel>  );}export {  AlertDialog,  AlertDialogTrigger,  AlertDialogPortal,  AlertDialogOverlay,  AlertDialogContent,  AlertDialogHeader,  AlertDialogTitle,  AlertDialogDescription,  AlertDialogFooter,  AlertDialogAction,  AlertDialogCancel,  alertDialogFooterVariants,};export type { AlertDialogContentProps, AlertDialogFooterProps, AlertDialogActionProps };

Anatomy

Alert Dialog는 Backdrop(Overlay)와 Dialog Content가 결합된 형태로 하나의 컴포넌트로 제공돼요.

Backdrop: 뒤쪽 화면을 어둡게 처리해 시선을 Dialog에 모아요.
Header: 제목(Title)과 설명(Description)으로 구성돼요.
Footer: 액션 버튼(Action, Cancel)이 배치돼요.

<AlertDialog>
  <AlertDialogTrigger />
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle />
      <AlertDialogDescription />
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel />
      <AlertDialogAction />
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Properties

Layout

Action Button 가로 배열을 기본으로 제공해요. 버튼 라벨이 길어 한 줄에 들어가지 않으면 자동으로 세로 배열로 전환돼요(layout="responsive"). 처음부터 세로로 쌓으려면 layout="vertical" 을 사용해요.

Show Title

상황에 따라서 제목을 표시하지 않을 수 있어요. 이때도 스크린 리더가 Dialog의 목적을 알 수 있도록 AlertDialogTitle 에 sr-only 를 지정해 남겨 두는 것을 권장해요.

Single Action

확인만 필요한 안내라면 액션 버튼 하나만 배치할 수 있어요.

Controlled

Trigger 외의 방식으로 열고 닫으려면 open 과 onOpenChange 로 상태를 제어해요. AlertDialogAction 의 onClick 에서 event.preventDefault() 를 호출하면 Dialog가 닫히지 않아요.

아직 삭제하지 않았어요.

Guidelines

알림 또는 확인이 필요한 상황에서 사용

Alert Dialog는 사용자가 반드시 알아야 할 정보나 옵션 선택이 필요한 경우 사용해요. 기본적으로 Neutral 사용을 권장하지만, 제품의 핵심 가치와 맞닿아 있는 정보를 안내하는 경우 Brand를 사용할 수 있어요.

경고가 필요한 상황에서 사용

데이터 삭제, 사용자가 작성한 내용이 지워질 수 있는 경우, 설정 초기화 등 사용자가 행동한 무언가가 유실될 수 있는 상황에서는 Critical로 표현해요. 경고가 필요한 액션을 의미하는 버튼이 Critical로 표시되어야 해요.

게시글을 삭제할까요?삭제한 게시글은 되돌릴 수 없어요.

취소삭제

Do· 경고 액션에 Critical

되돌릴 수 없는 액션을 의미하는 버튼에 Critical을 지정해요.

게시글을 삭제할까요?삭제한 게시글은 되돌릴 수 없어요.

취소삭제

Don't· 취소 버튼에 Critical

Critical Action Button은 경고가 필요한 액션에 지정되어야 해요.

취소나가기

Do· 제공되는 형태 그대로

제공되는 형태 그대로 사용하고 정렬을 항상 유지해요.

채팅방을 나갈까요?나가면 대화 내용이 모두 사라져요.

취소나가기

Don't· 임의 커스텀

임의로 커스텀하거나 콘텐츠 정렬을 변경하지 마세요.

Alert Dialog와 Menu Sheet는 유사한 UI이지만, 사용 목적과 제공하는 기능에 차이가 있어요. Menu Sheet는 Alert Dialog와 달리 바깥을 탭하면 닫을 수 있어요.

구분	Alert Dialog	Menu Sheet
목적	반드시 선택이 필요, 되돌릴 수 없는 액션에 대한 안내	사용할 수 있는 여러 개의 메뉴와 액션을 제공
제공 액션 개수	2개 이하 (닫기 포함)	2개 이상 (닫기 포함)
액션 구성	양자택일 (삭제 여부 / 이탈 여부 등)	여러 개로 구성
내용 표시 여부	액션에 대한 부연 설명이 반드시 필요	설명이 필요 없을 수 있음
표시 위치	화면 정중앙	화면 하단
닫기 액션	명시적인 닫기, 취소 등 버튼을 탭해야 닫힘	닫기 등의 버튼이나 바깥 영역을 탭해도 닫힘

Type

Alert Dialog

설치

Anatomy

Properties

Layout

Show Title

Single Action

Controlled

Guidelines

알림 또는 확인이 필요한 상황에서 사용

경고가 필요한 상황에서 사용

긴 버튼 라벨을 사용하는 경우

Nonpreferred 레이아웃 사용하기 (사용 시 주의)

임의로 다양한 콘텐츠를 조합하는 경우

Alert Dialog vs. Menu Sheet

Props

AlertDialog

AlertDialogContent

AlertDialogFooter

AlertDialogAction · AlertDialogCancel

On this page

Alert Dialog

설치Copy Anchor Link

수동 설치

AnatomyCopy Anchor Link

PropertiesCopy Anchor Link

LayoutCopy Anchor Link

Show TitleCopy Anchor Link

Single ActionCopy Anchor Link

ControlledCopy Anchor Link

GuidelinesCopy Anchor Link

알림 또는 확인이 필요한 상황에서 사용Copy Anchor Link

경고가 필요한 상황에서 사용Copy Anchor Link

긴 버튼 라벨을 사용하는 경우Copy Anchor Link

Nonpreferred 레이아웃 사용하기 (사용 시 주의)Copy Anchor Link

임의로 다양한 콘텐츠를 조합하는 경우Copy Anchor Link

Alert Dialog vs. Menu SheetCopy Anchor Link

PropsCopy Anchor Link

AlertDialogCopy Anchor Link

AlertDialogContentCopy Anchor Link

AlertDialogFooterCopy Anchor Link

AlertDialogAction · AlertDialogCancelCopy Anchor Link

On this page

설치

Anatomy

Properties

Layout

Show Title

Single Action

Controlled

Guidelines

알림 또는 확인이 필요한 상황에서 사용

경고가 필요한 상황에서 사용

긴 버튼 라벨을 사용하는 경우

Nonpreferred 레이아웃 사용하기 (사용 시 주의)

임의로 다양한 콘텐츠를 조합하는 경우

Alert Dialog vs. Menu Sheet

Props

AlertDialog

AlertDialogContent

AlertDialogFooter

AlertDialogAction · AlertDialogCancel