reopt designreopt design
DocsExploreToolsPricingBuilder
Login
Explore/
opt-ui205opt-charts40opt-datagrid9opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview205Core74Shells99Blocks32
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/Core/Dialog

Dialog

Component

모달 다이얼로그. 9-part anatomy: Root, Disclosure, Panel, Heading, Description, Dismiss, Header, Body, Footer.

overlay
Related docs
bun add @reopt-ai/opt-ui
100%

기본 구조 — Header / Body / Footer

DialogDisclosure — 비제어 모드

DialogDisclosure를 사용하면 open/setOpen 상태 관리 없이 다이얼로그를 열고 닫을 수 있습니다.

사이즈 변형 — xs ~ full

접근성 — aria-labelledby / aria-describedby 자동 연결

DialogHeading은 자동으로 aria-labelledby를, DialogDescription은 aria-describedby를 다이얼로그에 연결합니다. 수동 ID 관리가 필요 없습니다.

스크롤 가능한 본문 — DialogBody overflow

다이얼로그 닫기 패턴

다이얼로그를 닫는 여러 방법을 확인할 수 있습니다. ESC, 배경 클릭, 또는 Button의 onClick으로 setOpen(false)을 호출합니다.

중첩 다이얼로그 — 다이얼로그 안에 다이얼로그

커스텀 레이아웃 — Header/Body/Footer 선택적 사용

Header, Body, Footer는 모두 선택적입니다. 필요한 부분만 사용할 수 있습니다.

DialogRoot

PropTypeDefaultDescription
openboolean—제어 모드: 열림 상태
setOpen(open: boolean) => void—제어 모드: 상태 변경 핸들러

DialogDisclosure

PropTypeDefaultDescription
children*ReactNode—트리거 버튼 내용
classNamestring—기본 스타일 오버라이드

DialogPanel

PropTypeDefaultDescription
children*ReactNode—다이얼로그 콘텐츠
size"xs" | "sm" | "md" | "lg" | "xl" | "full""md"최대 너비 프리셋
backdropReactElement<div> (반투명 배경)배경 오버레이 요소
classNamestring—기본 스타일 오버라이드

DialogHeading

PropTypeDefaultDescription
children*ReactNode—제목 텍스트 (자동 aria-labelledby 연결)

DialogDescription

PropTypeDefaultDescription
children*ReactNode—설명 텍스트 (자동 aria-describedby 연결)

DialogDismiss

PropTypeDefaultDescription
childrenReactNode—닫기 버튼 내용

DialogHeader

PropTypeDefaultDescription
children*ReactNode—Heading, Description, Dismiss 등 헤더 콘텐츠

DialogBody

PropTypeDefaultDescription
children*ReactNode—스크롤 가능한 본문 콘텐츠

DialogFooter

PropTypeDefaultDescription
children*ReactNode—액션 버튼 영역

컴포넌트 의존 관계

깊이
▲ USED BY (4)command-paletteconfirm-dialogsave-query-dialogcustom-dashboardDialog
View test results

테스트 커버리지

2026년 7월 9일7/7 통과
7성공
0실패
7전체
  • open=true일 때 dialog role을 갖는다
  • AlertDialogPanel은 alertdialog role을 갖는다
  • open=false일 때 dialog role이 없다
  • DialogDismiss를 렌더링한다
  • DialogHeading이 aria-labelledby를 자동 연결한다
  • DialogDescription이 aria-describedby를 자동 연결한다
  • DialogHeader/Body/Footer 구조를 렌더링한다

키보드 동작

키동작
Esc다이얼로그 닫기
Tab다이얼로그 내 포커스 이동 (트랩)

Blocks that use this component

CustomDashboard

커스텀 대시보드 Surface. WidgetGrid + ReportBuilder + ReportWidget + FilterBar 조합.

Display

Related components

Disclosure

접기/펼치기 콘텐츠 영역. 3-part anatomy: Root, Trigger, Content.

Overlay

Popover

Popover 프리미티브 래퍼. 트리거 요소에 연결된 플로팅 콘텐츠를 표시합니다.

Overlay

Drawer

사이드/하단 슬라이드 패널. Dialog 기반 compound 패턴으로 접근성을 보장합니다.

Overlay

Menu

메뉴바 + 개별 메뉴 시스템. 10 exports: MenubarRoot, MenubarContainer, MenuRoot, MenuTrigger, MenuButtonArrow, MenuPopover, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuSeparator.

NavOverlay

DropdownMenu

Menu Core 위의 간편 래퍼. 단일 트리거 드롭다운 메뉴에 특화되었습니다.

NavOverlay

FieldToken

필드 타입을 일관된 글리프와 선택적 텍스트 레이블로 표현합니다. 문자열·숫자·날짜·IP·지오 등 분석 스키마 타입마다 같은 아이콘과 팔레트 슬롯을 씁니다.

PreviousSelectNextCombobox