Overlay

Renders a translucent layer over content, typically used for modals, popovers, progress bars, or blocking interactions.

Default Behavior:

ZIndex defaults to 5.
The <MudOverlay> does not cover high-priority elements like the <MudAppBar> or <MudDrawer> when used alone as they render above overlays due to theme-level defaults.
Unless excluded, the <MudOverlay> is scaffolded globally via the <MudPopoverProvider>, meaning only one overlay instance is active at a time. When scaffolded alongside a <MudPopover> the overlay is assigned a ZIndex exactly one less than the popover so the popover remains interactive and visually above the overlay.

API

<MudOverlay>

AutoClose

Use the AutoClose property to allow users to close the overlay by clicking anywhere on it.

@inject ISnackbar Snackbar
 
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="OpenOverlay">Show overlay</MudButton>

<MudOverlay @bind-Visible="_visible" DarkBackground AutoClose="true" OnClosed="OnOverlayClosed" />

@code {
    private bool _visible;

    public void OpenOverlay()
    {
        _visible = true;
        StateHasChanged();
    }
    
    public void OnOverlayClosed()
    {
        Snackbar.Add("Random message", Severity.Normal);
    }
}

Absolute

The overlay can be contained inside its parent by setting the Absolute property along with the relative class (or CSS position: relative style).

An overlay with Absolute set is excluded from scaffolding and is rendered individually.

<MudPaper Class="pa-8" Style="height: 300px; position: relative;">
    <MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="@(e => ToggleOverlay(true))">Show overlay</MudButton>

    <MudOverlay Visible="visible" DarkBackground="true" Absolute="true">
        <MudButton Variant="Variant.Filled" Color="Color.Primary"  OnClick="@(e => ToggleOverlay(false))">Hide overlay</MudButton>
    </MudOverlay>
</MudPaper>

@code {
    private bool visible;

    public void ToggleOverlay(bool value)
    {
        visible = value;
    }
}