Lumeo

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.

Keyboard Interactions

Key Action
EscapeCloses the dialog (unless PreventClose is enabled).
TabCycles focus through focusable elements inside the dialog.
Shift+TabMoves 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

Sm
Default
Lg
Xl
Full

API Reference

Dialog

Property Type Default Description
Open bool false Controls whether the dialog is open. Use with @bind-Open for two-way binding.
OpenChanged EventCallback<bool> — Callback invoked when the open state changes. Part of the two-way binding pair.
IsOpen bool false Alias for Open; kept for backwards compatibility with @bind-IsOpen.
IsOpenChanged EventCallback<bool> — Alias for OpenChanged; kept for backwards compatibility with @bind-IsOpen.

DialogContent

Property Type Default Description
PreventClose bool false Prevents closing via backdrop click or Escape key.
The dialog panel. Renders as a centered modal with a close button, backdrop, focus trap, and scroll lock. Must be a descendant of Dialog.
Size DialogSize Default Maximum width of the dialog. Values: Sm, Default, Lg, Xl, Full.
Scrollable bool false Allows the content area to scroll when it exceeds the viewport.

DialogTrigger

Property Type Default Description
Wraps any element and opens the dialog when clicked. Must be a descendant of Dialog.

DialogClose

Property Type Default Description
Wraps any element and closes the dialog when clicked. Must be a descendant of Dialog.

DialogHeader

Property Type Default Description
Container for dialog title and description. Renders as a flex column with spacing.

DialogFooter

Property Type Default Description
Container for dialog action buttons. Renders as a flex row (stacked on mobile).

DialogTitle

Property Type Default Description
The dialog title rendered as an h2 with semibold styling.

DialogDescription

Property Type Default Description
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.