# Alert Dialog Source: https://lumeo.nativ.sh/components/alert-dialog # Alert Dialog A modal dialog that interrupts the user with important content and expects a response. ## Installation .NET CLI PackageReference Lumeo CLI dotnet add package Lumeo One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction). ## Usage @using Lumeo ## 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 Preview Code Default Delete Account Preview Code With Action Handler Remove Item Preview Code Unsaved Changes Close Editor Preview Code Loading Action Delete Account ## Intercepting close `OnBeforeClose` fires whenever the alert dialog tries to close. The handler receives a `DismissEventArgs` with a `Reason` string — `"escape"`, `"outside"`, `"action"`, or `"cancel"`. Set `e.Cancel = true` to keep it open — useful if you need to validate before allowing a destructive confirmation through. Preview Code Intercepting close Delete project **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. ## API Reference ### AlertDialog Prop Type Default Description ChildContent RenderFragment? null Child content of the alert dialog. Open bool false Controls whether the dialog is open. Use with @bind-Open for two-way binding. OpenChanged EventCallback — Callback invoked when the open state changes. IsOpen bool false Obsolete alias for `Open`; will be removed in a future release. IsOpenChanged EventCallback — Obsolete alias for `OpenChanged`; will be removed in a future release. ### AlertDialogTrigger Prop Type Default Description ChildContent RenderFragment? null Content that triggers the dialog when clicked. Class string? null Additional CSS classes. AdditionalAttributes Dictionary? null Additional HTML attributes. ### AlertDialogContent Prop Type Default Description ChildContent RenderFragment? null Content of the dialog panel. Class string? null Additional CSS classes. AdditionalAttributes Dictionary? null Additional HTML attributes. ### AlertDialogHeader Prop Type Default Description ChildContent RenderFragment? null Header content (typically title and description). Class string? null Additional CSS classes. AdditionalAttributes Dictionary? null Additional HTML attributes. ### AlertDialogFooter Prop Type Default Description ChildContent RenderFragment? null Footer content (typically action and cancel buttons). Class string? null Additional CSS classes. AdditionalAttributes Dictionary? null Additional HTML attributes. ### AlertDialogTitle Prop Type Default Description ChildContent RenderFragment? null Title text content. Class string? null Additional CSS classes. AdditionalAttributes Dictionary? null Additional HTML attributes. ### AlertDialogDescription Prop Type Default Description ChildContent RenderFragment? null Description text content. Class string? null Additional CSS classes. AdditionalAttributes Dictionary? null Additional HTML attributes. ### AlertDialogAction Prop Type Default Description ChildContent RenderFragment? null Button label content. OnAction EventCallback — Callback invoked when clicked. Dialog closes after completion unless IsLoading is true. IsLoading bool false Shows a loading spinner and prevents the dialog from closing. Class string? null Additional CSS classes. AdditionalAttributes Dictionary? null Additional HTML attributes. ### AlertDialogCancel Prop Type Default Description ChildContent RenderFragment? null Button label content. Class string? null Additional CSS classes. AdditionalAttributes Dictionary? null Additional HTML attributes. ## Related Components - [Dialog](/components/dialog) — For non-critical modal content that doesn't require a forced decision - [Toast](/components/toast) — For non-blocking notifications and confirmations after an action