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", "outside", "action", or "cancel". Set e.Cancel = true to keep it open — useful if you need to validate before allowing a destructive confirmation through.

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
ChildContentRenderFragment?nullChild content of the alert dialog.
OpenboolfalseControls whether the dialog is open. Use with @bind-Open for two-way binding.
OpenChangedEventCallback<bool>—Callback invoked when the open state changes.
IsOpenboolfalseObsolete alias for Open; will be removed in a future release.
IsOpenChangedEventCallback<bool>—Obsolete alias for OpenChanged; will be removed in a future release.

AlertDialogTrigger

Prop Type Default Description
ChildContentRenderFragment?nullContent that triggers the dialog when clicked.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

AlertDialogContent

Prop Type Default Description
ChildContentRenderFragment?nullContent of the dialog panel.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

AlertDialogHeader

Prop Type Default Description
ChildContentRenderFragment?nullHeader content (typically title and description).
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

AlertDialogFooter

Prop Type Default Description
ChildContentRenderFragment?nullFooter content (typically action and cancel buttons).
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

AlertDialogTitle

Prop Type Default Description
ChildContentRenderFragment?nullTitle text content.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

AlertDialogDescription

Prop Type Default Description
ChildContentRenderFragment?nullDescription text content.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

AlertDialogAction

Prop Type Default Description
ChildContentRenderFragment?nullButton label content.
OnActionEventCallback—Callback invoked when clicked. Dialog closes after completion unless IsLoading is true.
IsLoadingboolfalseShows a loading spinner and prevents the dialog from closing.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

AlertDialogCancel

Prop Type Default Description
ChildContentRenderFragment?nullButton label content.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

Related Components

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