reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
ConfirmDialog
reopt designreopt design

A design system for the AI era

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

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

© 2026 reopt Inc. All rights reserved.

ConfirmDialog

Shell

Confirm or cancel actions with a danger variant for destructive operations.

feedback
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { ConfirmDialog } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

기본 확인 다이얼로그

Danger 변형 — 위험한 작업 확인

children 슬롯 — 추가 콘텐츠 삽입

커스텀 라벨 — confirmLabel / cancelLabel

ConfirmDialog

PropTypeDefaultDescription
openRequiredboolean—열림 상태
onConfirmRequired() => void—확인 콜백
onCancelRequired() => void—취소 콜백
titleRequiredstring—대화 상자 제목
descriptionstring—설명 텍스트
confirmLabelstring"Confirm"확인 버튼 텍스트
cancelLabelstring"Cancel"취소 버튼 텍스트
variant"default" | "danger""default"변형

컴포넌트 의존 관계

깊이
▲ USED BY (2)▼ USES (1)project-settingsproject-overviewConfirmDialogdialog
View test results

테스트 커버리지

2026년 7월 9일3/3 통과
3성공
0실패
3전체
  • open=true일 때 렌더링된다
  • 확인 버튼 클릭 시 onConfirm 호출
  • 취소 버튼 클릭 시 onCancel 호출

Blocks that use this component

opt-ui

ProjectOverview

Blocks

Summarize a project with metrics, navigation cards, charts, tables, code snippets, and dashboard management.

opt-ui

ProjectSettings

Blocks

Manage project settings, retention policies, cleanup previews, and storage usage with forms, tables, and code snippets.

Related components

opt-ui

StatusSelect

Shells

Choose a status from a dropdown with color indicators.

opt-ui

NotificationToast

Shells

Manage global notifications with priority-aware live regions and auto-dismiss paused during pointer or keyboard interaction.

opt-ui

ConnectionIndicator

Shells

Indicate connected, connecting, disconnected, and error states.

opt-ui

FloatingActionBar

Shells

Show bulk actions for selected items in a floating bottom bar.

opt-ui

FailureList

Shells

Review grouped failures with severity colors and action slots.

opt-ui

AlertBuilder

Shells

Configure metric conditions, frequency, and notification channels with explicitly associated form labels.

PreviousAppShellNextAsyncCombobox