Skip to content

AlertDialog

A modal that asks for a confirmation and ignores clicks outside; fires confirm or cancel.

Group: Overlays · Kind: macro

open

Delete board?

This cannot be undone.

Open in the playground

The same specimen painted by React, SwiftUI, Compose and gpui.

exponential-ui-alert-dialog on Web
exponential-ui-alert-dialog on iOS
exponential-ui-alert-dialog on Android
exponential-ui-alert-dialog on Desktop
Prop Type Required Bindable Description
title string yes – The question.
description string – – What will happen.
confirmLabel string – – The confirming button’s text. Default "$string.confirm".
cancelLabel string – – The cancelling button’s text. Default "$string.cancel".
destructive boolean – – Styles the confirming button as dangerous. Default false.
open boolean – yes Whether it shows; bind it. Default false.
  • on.confirm: runs an action
  • on.cancel: runs an action
  • on.change: runs an action
  • trigger: one component by id

many

No basic catalog component maps here.

Box · Button · Dialog

Role: alertdialog

alertdialog. The cancel button takes focus on open (autoFocus, $a11y).

Keys Action
– Opening focuses the cancel button
Escape cancel; clicks outside are ignored

Recipe parts: AlertDialog/root AlertDialog/footer AlertDialog/cancel AlertDialog/confirm

Keyed by: destructive :hover :pressed :focus :disabled :checked :open :selected :invalid :dragover

Themes · Write a theme

Button · Dialog · Drawer · DockCard · Popover · Tooltip · Menu · Toast