Lumeo

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<AlertDialog />

When to Use

  • Confirming destructive actions like deleting accounts, removing data, or revoking access
  • Warning users about irreversible operations that cannot be undone
  • Requiring an explicit decision before proceeding with a critical workflow

Intercepting close

OnBeforeClose fires whenever the alert dialog tries to close. The handler receives a DismissEventArgs with a Reason string — "escape", "action", or "cancel". Set e.Cancel = true to keep it open — useful if you need to validate before allowing a destructive confirmation through. The alert dialog stays strictly modal (matching Radix), so there is no "outside" click-to-dismiss reason — the backdrop never closes it.

Nested stacking. AlertDialogs opened on top of a Dialog, Sheet, or Drawer now stack with correct z-index and focus management. Escape closes only the top-most overlay. No API change.

Exit animation. Closing plays a scale-and-fade-out animation and keeps the panel mounted until it finishes, so the decision reads as deliberate. This is the default. Pass PlayExitAnimation="false" to AlertDialogContent to opt out and unmount immediately.

API Reference

AlertDialog

AlertDialogTrigger

AlertDialogContent

AlertDialogHeader

AlertDialogFooter

AlertDialogTitle

AlertDialogDescription

AlertDialogAction

AlertDialogCancel

  • Dialog — For non-critical modal content that doesn't require a forced decision
  • Toast — For non-blocking notifications and confirmations after an action