Confirm Dialog

Asks the user to confirm one action, in one element. An async action keeps it open and busy until it finishes.

Stable

Web

iOS

Android

@advui/core

JSX

<ConfirmDialog
  title="Publish “Atlas”?"
  description="Anyone with the link can see it."
  confirmLabel="Publish"
  cancelLabel="Cancel"
  trigger={<Button variant="outline">Publish project</Button>}
  onConfirm={confirm}
/>

PropsOpen in Playground

title

description

confirmLabel

cancelLabel

tone

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/core

npm

npm install @advui/core

Usage

import { Button, ConfirmDialog } from '@advui/core'

<ConfirmDialog
  trigger={<Button variant="destructive">Delete project</Button>}
  title="Delete “Atlas”?"
  description="This cannot be undone."
  confirmLabel="Delete"
  tone="destructive"
  onConfirm={async () => {
    await deleteProject()
  }}
/>

Examples

Destructive confirmation

Preview

Code

Waits for the action

onConfirm returns a Promise, so the dialog stays open and busy until it resolves.

Preview

Code

API reference

ConfirmDialog

Built on Alert Dialog. Compose Alert Dialog instead when the dialog needs more content, such as a field.

Prop	Type	Default	Description
`title` required	`ReactNode`	—	The question, e.g. “Delete this project?”. Names the dialog.
`description`	`ReactNode`	—	The consequences. Announced with the title.
`confirmLabel`	`ReactNode`	`'Confirm'`	Label of the confirm button. Name the action, e.g. “Delete”.
`cancelLabel`	`ReactNode`	`'Cancel'`	Label of the cancel button.
`tone`	`'default' \| 'destructive'`	`'default'`	`destructive` gives the confirm button the destructive fill.
`onConfirm`	`() => void \| Promise<unknown>`	—	Called when the user confirms. A returned Promise keeps the dialog open and busy: it closes when the Promise resolves and stays open when it rejects, so the user can retry. Show the error yourself, e.g. with a toast.
`onCancel`	`() => void`	—	Called when the user cancels: Cancel, Escape or the Android back button.
`trigger`	`ReactElement`	—	Opens the dialog, such as a Button. Leave it out and open it with `open`.
`open`	`boolean`	—	Open state, when you control it.
`defaultOpen`	`boolean`	`false`	Open at first, when the dialog manages its state.
`onOpenChange`	`(open: boolean) => void`	—	Called when the dialog opens or closes.

Accessibility

role="alertdialog" with aria-modal, named by the title and described by the description, so screen readers announce the whole question.
Focus starts on Cancel, the safe choice, is trapped while open and returns to the trigger on close.
Presses outside do nothing; Escape cancels.
While an async onConfirm runs, the confirm button is busy (aria-busy) and Cancel is disabled; Escape and the Android back button do nothing until it settles.

Keyboard interactions
Key	Action
`Tab / Shift + Tab`	Moves between Cancel and the confirm button.
`Enter / Space`	Activates the focused button.
`Esc`	Cancels and closes the dialog, unless the action is running.

Responsive behavior

Buttons stack full-width below the sm breakpoint, with the confirm button on top.

Platform notes

Web

Rendered in a portal with the page scroll locked.

iOS

Rendered in a native portal above navigation.

Android

The back button cancels, like Escape.

Since v0.13.0Last updated Nov 2, 2026Edit this page on GitHub

PreviousCircular Progress

NextEmpty State