# Dialog

Source: https://lumeo.nativ.sh/components/dialog

# Dialog

A modal dialog that overlays the main content and requires user interaction.

## 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

<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.

Preview Code

Default

Edit Profile

Preview Code

Simple Dialog

Share

Preview Code

Confirmation Dialog

Delete Account

Preview Code

Prevent Close

Open Protected Dialog

**Mobile (rc.49).** The dialog close button is now a 44×44 px touch target on small screens, making it reliably tappable without accidentally dismissing or missing the button.

## 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).

Preview Code

Intercepting close

Edit profile

**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

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

Sm

Open Sm

Default

Open Default

Lg

Open Lg

Xl

Open Xl

Full

Open 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](/components/alert-dialog) — A stricter dialog for confirmations that requires an explicit response.
-   [Sheet](/components/sheet) — A panel that slides in from the edge for supplementary content.
-   [Drawer](/components/drawer) — A bottom-sheet style overlay, ideal for mobile-friendly interactions.
-   [Popover](/components/popover) — A lightweight overlay anchored to a trigger, for non-modal content.