# Overlay

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

# Overlay

Low-level backdrop primitive for custom popovers and modals.

## When to Use

-   Open a `Dialog`, `Sheet`, or `Drawer` programmatically from any service or handler — without managing open/closed state locally.
-   Show confirmation dialogs from deeply nested components or event handlers.
-   Create wizard flows where each step is a separate Blazor component loaded into an overlay.

**Setup required:** Add `<OverlayProvider />` once near the root of your app layout (e.g. `MainLayout.razor`) and register `OverlayService` in DI.

Preview Code

Open a Dialog

Open Dialog

Result: **—**

Copy Code

Preview Code

Open a Sheet

Open Sheet

Copy Code

Preview Code

Confirmation Dialog

Delete Item

Confirmed: **—**

Copy Code

## Setup

Register the service and add the provider to your layout:

`// Program.cs builder.Services.AddScoped<OverlayService>(); // MainLayout.razor <OverlayProvider />`

## API Reference

### OverlayService

Method

Returns

Description

ShowDialogAsync<TComponent>(title?, parameters?, options?)

Task<OverlayResult>

Opens a Dialog overlay containing `TComponent`. Awaitable — resolves when closed.

ShowSheetAsync<TComponent>(title?, side?, size?, parameters?, options?)

Task<OverlayResult>

Opens a Sheet overlay. Default side is `Right`.

ShowDrawerAsync<TComponent>(title?, parameters?, options?)

Task<OverlayResult>

Opens a Drawer overlay (slide-up).

ShowAlertDialogAsync(alertOptions)

Task<OverlayResult>

Opens a confirmation AlertDialog with configurable title, description, and button labels.

Close(overlayId, result?)

void

Closes an overlay and resolves its task with an OK result.

Cancel(overlayId)

void

Closes an overlay and resolves its task as cancelled.

### OverlayResult

Property

Type

Description

Cancelled

bool

True when the overlay was dismissed without confirmation.

Data

object?

Optional return value passed to `Close(id, result)`.

## Related Components

-   [Dialog](/components/dialog) — Modal dialog for direct template-based usage.
-   [Sheet](/components/sheet) — Slide-in panel for direct template-based usage.
-   [AlertDialog](/components/alert-dialog) — Confirmation modal for destructive actions.
-   [Drawer](/components/drawer) — Mobile-first slide-up sheet.