Alert Dialog

중요한 내용으로 사용자를 방해하고 응답을 기대하는 모달 다이얼로그 컴포넌트예요.

출처: 문서

본문

삭제 확인처럼 사용자의 즉각적인 응답이 필요한 중요한 작업을 알릴 때 쓰는 모달이에요. 포커스가 자동으로 다이얼로그 안에 갇히고, Esc 키로 닫히며, 스크린 리더를 위한 공지를 Title/Description 컴포넌트로 관리해요.

Features

포커스가 자동으로 트랩돼요.
제어(controlled)/비제어(uncontrolled) 방식 모두 지원.
Title과 Description 컴포넌트로 스크린 리더 공지를 관리해요.
Esc 키로 컴포넌트가 자동으로 닫혀요.

Anatomy

모든 파트를 임포트해 조립해요.

import { AlertDialog } from "radix-ui";

export default () => (
  <AlertDialog.Root>
    <AlertDialog.Trigger />

    <AlertDialog.Portal>
      <AlertDialog.Overlay />

      <AlertDialog.Content>
        <AlertDialog.Title />

        <AlertDialog.Description />

        <AlertDialog.Cancel />

        <AlertDialog.Action />
      </AlertDialog.Content>
    </AlertDialog.Portal>
  </AlertDialog.Root>
);

API Reference

Root

알림 다이얼로그의 모든 파트를 담아요.

Prop	Type	Default
`defaultOpen`	`boolean`	No default value
`open`	`boolean`	No default value
`onOpenChange`	`function`	No default value

Trigger

다이얼로그를 여는 버튼이에요.

Prop	Type	Default
`asChild`	`boolean`	`false`

Data attribute	Values
`[data-state]`	`"open" \| "closed"`

Portal

사용하면 overlay와 content 파트를 body로 포털(portal)해요.

Prop	Type	Default
`forceMount`	`boolean`	No default value
`container`	`HTMLElement`	`document.body`

Overlay

다이얼로그가 열려 있을 때 뷰의 비활성(inert) 부분을 덮는 레이어예요.

Prop	Type	Default
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	No default value

Data attribute	Values
`[data-state]`	`"open" \| "closed"`

Content

다이얼로그가 열렸을 때 렌더링할 콘텐츠를 담아요.

Prop	Type	Default
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	No default value
`onOpenAutoFocus`	`function`	No default value
`onCloseAutoFocus`	`function`	No default value
`onEscapeKeyDown`	`function`	No default value

Data attribute	Values
`[data-state]`	`"open" \| "closed"`

Cancel

다이얼로그를 닫는 버튼이에요. 이 버튼은 AlertDialog.Action 버튼과 시각적으로 구분되어야 해요.

Prop	Type	Default
`asChild`	`boolean`	`false`

Action

다이얼로그를 닫는 버튼이에요. 이 버튼은 AlertDialog.Cancel 버튼과 시각적으로 구분되어야 해요.

Prop	Type	Default
`asChild`	`boolean`	`false`

Title

다이얼로그가 열렸을 때 공지될 접근 가능한 이름이에요. 대신 AlertDialog.Content에 aria-label이나 aria-labelledby를 제공하고 이 컴포넌트를 생략할 수도 있어요.

Prop	Type	Default
`asChild`	`boolean`	`false`

Description

다이얼로그가 열렸을 때 공지될 접근 가능한 설명이에요. 대신 AlertDialog.Content에 aria-describedby를 제공하고 이 컴포넌트를 생략할 수도 있어요.

Prop	Type	Default
`asChild`	`boolean`	`false`

Examples

비동기 폼 제출 후 닫기

제어 props를 사용해 비동기 작업이 완료된 후 Alert Dialog를 프로그래밍 방식으로 닫을 수 있어요.

import * as React from "react";

import { AlertDialog } from "radix-ui";

const wait = () => new Promise((resolve) => setTimeout(resolve, 1000));

export default () => {
  const [open, setOpen] = React.useState(false);

  return (
    <AlertDialog.Root open={open} onOpenChange={setOpen}>
      <AlertDialog.Trigger>Open</AlertDialog.Trigger>

      <AlertDialog.Portal>
        <AlertDialog.Overlay />

        <AlertDialog.Content>
          <form
            onSubmit={(event) => {
              wait().then(() => setOpen(false));
              event.preventDefault();
            }}
          >
            {/** some inputs */}

            <button type="submit">Submit</button>
          </form>
        </AlertDialog.Content>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  );
};

커스텀 포털 컨테이너

알림 다이얼로그가 포털될 요소를 커스터마이즈할 수 있어요.

export default () => {
  const [container, setContainer] = React.useState(null);

  return (
    <div>
      <AlertDialog.Root>
        <AlertDialog.Trigger />

        <AlertDialog.Portal container={container}>
          <AlertDialog.Overlay />

          <AlertDialog.Content>...</AlertDialog.Content>
        </AlertDialog.Portal>
      </AlertDialog.Root>

      <div ref={setContainer} />
    </div>
  );
};

Accessibility

Alert and Message Dialogs WAI-ARIA 디자인 패턴을 준수해요.

키보드 상호작용

Key	Description
`Space`	Opens/closes the dialog.
`Enter`	Opens/closes the dialog.
`Tab`	Moves focus to the next focusable element.
`Shift + Tab`	Moves focus to the previous focusable element.
`Esc`	Closes the dialog and moves focus to `AlertDialog.Trigger`.

더 알아보기 (Learn more)

AlertDialog.Cancel과 AlertDialog.Action은 각각 취소/확인 동작을 담당하며 시각적으로 구분하는 것이 권장돼요.
비동기 작업 후 닫기 등 프로그래밍 방식 제어는 open/onOpenChange 제어 props로 처리해요.