Dialog
A modal dialog that overlays the main content and requires user interaction.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Dialog />
When to Use
- Present confirmation prompts for destructive or irreversible actions.
- Display forms that require the user's full attention, such as editing a profile.
- Show important decisions that must be acknowledged before continuing.
Intercepting close
OnBeforeClose fires before the
dialog closes for any reason. Set e.Cancel = true
to keep it open — the typical use case is an unsaved-changes guard. The handler receives a
DismissEventArgs with a
Reason string — one of
"escape",
"outside",
"close" (the X button),
"action", or
"cancel". Branch on the
reason if you only want to intercept some paths (e.g. allow the explicit Cancel button but block stray Escape /
backdrop clicks).
Nested dialogs. Stacking a Dialog on top of another Dialog (or AlertDialog, Sheet, Drawer) now works automatically — each overlay claims the next z-index slot and Escape closes only the top-most overlay. No API change; just open a second dialog from inside the first.
Exit animation. Closing plays a scale-and-fade-out animation and keeps the panel mounted until
it finishes, so dismissal feels intentional. This is the default. Pass
PlayExitAnimation="false"
to DialogContent to opt out and
unmount immediately.
Keyboard Interactions
| Key | Action |
|---|---|
| Escape | Closes the dialog (unless PreventClose is enabled). |
| Tab | Cycles focus through focusable elements inside the dialog. |
| Shift+Tab | Moves focus to the previous focusable element inside the dialog. |
Parameter Coverage
Click any trigger below to open the dialog at that size — DialogContent.DialogSize covers every value.
DialogContent.DialogSize
API Reference
Dialog
DialogContent
The dialog panel. Renders as a centered modal with a close button, backdrop, focus trap, and scroll lock. Must be a descendant of Dialog.
DialogTrigger
Wraps any element and opens the dialog when clicked. Must be a descendant of Dialog.
DialogClose
Wraps any element and closes the dialog when clicked. Must be a descendant of Dialog.
DialogHeader
Container for dialog title and description. Renders as a flex column with spacing.
DialogFooter
Container for dialog action buttons. Renders as a flex row (stacked on mobile).
DialogTitle
The dialog title rendered as an h2 with semibold styling.
DialogDescription
Muted descriptive text rendered below the dialog title.
Related Components
- AlertDialog — A stricter dialog for confirmations that requires an explicit response.
- Sheet — A panel that slides in from the edge for supplementary content.
- Drawer — A bottom-sheet style overlay, ideal for mobile-friendly interactions.
- Popover — A lightweight overlay anchored to a trigger, for non-modal content.