tuil
ReferenceComponentsDialogs, toasts, and overlays

ConfirmDialog

ConfirmDialog component API, behavior, and executable example.

View rawEdit

Loading executable example…

API and events

Layer focus-trapped dialogs, contextual help, transient notices, and searchable command execution over an application.

export function ConfirmDialog({
  title,
  description,
  confirmLabel,
  cancelLabel,
  danger,
  onConfirm,
  onCancel,
  trigger,
  ...dialogProps
}: ConfirmDialogProps): ReactNode;

Props, functions, and events

MemberTypeRequiredDescriptionRelated types
titlestringYesThe title member uses the string contract.
descriptionstring | undefinedNoThe description member uses the string | undefined contract.
confirmLabelstring | undefinedNoThe confirmLabel member uses the string | undefined contract.
cancelLabelstring | undefinedNoThe cancelLabel member uses the string | undefined contract.
dangerboolean | undefinedNoThe danger member uses the boolean | undefined contract.
onConfirm() => void | Promise<void>YesThe onConfirm member uses the () => void | Promise<void> contract.
onCancel(() => void | Promise<void>) | undefinedNoThe onCancel member uses the (() => void | Promise<void>) | undefined contract.
triggerReactNodeNoThe trigger member uses the ReactNode contract.
idstring | undefinedNoThe id member uses the string | undefined contract.
openboolean | undefinedNoThe open member uses the boolean | undefined contract.
defaultOpenboolean | undefinedNoThe defaultOpen member uses the boolean | undefined contract.
onOpenChange((open: boolean) => void | Promise<void>) | undefinedNoThe onOpenChange member uses the ((open: boolean) => void | Promise<void>) | undefined contract.

Open state and selections flow through onOpenChange, onPress, command callbacks, and the toast API.

Callback props run after the documented input is accepted. Callbacks are not cancellable unless their return type or description states otherwise.

Interaction and capabilities

The top overlay receives input before application hotkeys. Escape closes dismissible overlays and focus returns to the prior node.

The published manifest records keyboard, focus, pointer, theme, terminal, semantic, event, and dependency requirements.

Complete import

import { ConfirmDialog } from "@/components/tuil/feedback/overlays";

On this page