Alert Dialog

SAlertDialog is a modal confirmation dialog for important or irreversible actions. It is built on Reka UI AlertDialog (alertdialog role, focus trap, Esc, portal). Unlike SDialog, it requires an explicit choice between the confirm and cancel buttons: clicking the overlay does not close it. The buttons are reusable SButton components. It is controlled with v-model:open; the choice emits confirm / cancel. When you need a confirmation in the middle of an async function, you can skip the markup and handlers entirely — see Async confirmation.

Basic usage

Custom title and confirmation

The title and description slots replace the props of the same name with markup (for example, an icon next to the title), and the cancelLabel prop sets the cancel button label.

Async confirmation

The useConfirm() composable gives you a call in the spirit of the native confirm(), only non-blocking: it returns a promise with the user's answer. The dialog is rendered by ConfirmProvider, which you mount once at the app root, next to ToastProvider.

Worth knowing:

• cancel and Esc resolve to false, confirm resolves to true; clicking the overlay does not close the dialog, so the user cannot dismiss it without answering;
• calls are queued: the next dialog opens once the current one is answered;
• the options are a subset of the component props (title, description, confirmLabel, cancelLabel, danger, square), so the dialog looks the same as the declarative version;
• without a mounted ConfirmProvider the call resolves to false and logs a console warning — the promise never hangs. On the server (SSR) it also resolves to a refusal: the queue is shared by all requests.

The confirm name

The local variable shadows the global window.confirm only inside its own module, and that is legal: confirm is not a reserved word. The native dialog is still available as window.confirm(...), and if the shadowing gets in the way, rename it while destructuring: const { confirm: askUser } = useConfirm().

API

Props

Name	Type	Default	Description
square	boolean	undefined	Square corners: removes the rounding (rounded by default).
title	string	undefined	Title (can be replaced with the title slot).
description	string	undefined	Explanatory text (can be replaced with the description slot).
confirm-label	string	undefined	Confirm button label.
cancel-label	string	undefined	Cancel button label.
danger	boolean	false	Destructive (irreversible) action: the confirm button uses the negative variant.
open	boolean	undefined	Whether the dialog is open. Two-way binding via v-model:open.

Events

Name	Signature	Description
update:open	(value: boolean | undefined) => void	Emitted when open changes. Used for two-way binding (v-model:open).
confirm	() => void	The user confirmed the action (confirm button).
cancel	() => void	The user canceled the action (cancel button).

Slots

Name	Description
trigger	Trigger element that opens the dialog.
title	Title (replaces the title prop).
description	Description (replaces the description prop).
default	Extra content between the description and the buttons.