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;
    }
}

Color

The overlay's default color is transparent, but you can adjust its appearance using either the DarkBackground or LightBackground properties.

Det var en gång en spindel, som hette laban. Laban tyckte om kebab pizza, men det gjorde inte hans kompis åke. Åke och Laban skulle en dag ut och fiska. På vägen dit skrek Laban till, faaan du åke!!! det luktar kebab!!!

Light Overlay

Dark Overlay

<MudGrid>
    <MudItem xs="12" sm="6">
        <MudPaper Class="pa-4 my-2" Style="position:relative;">
            <MudOverlay Visible="lightVisible" LightBackground="true" Absolute="true" />
            <MudText>
                Det var en gång en spindel, som hette laban. Laban tyckte om kebab pizza, men det gjorde inte hans kompis åke.
                Åke och Laban skulle en dag ut och fiska. På vägen dit skrek Laban till, faaan du åke!!! det luktar kebab!!!
            </MudText>
            <MudButton Variant="Variant.Filled" Class="mt-2">Action</MudButton>
        </MudPaper>
        <MudSwitch @bind-Value="lightVisible" Label="Light Overlay" Color="Color.Primary"/>
    </MudItem>
    <MudItem xs="12" sm="6">
        <MudPaper Class="pa-4 my-2" Style="position:relative;">
            <MudOverlay Visible="darkVisible" DarkBackground="true" Absolute="true" />
            <MudText>
                Det var en gång en spindel, som hette laban. Laban tyckte om kebab pizza, men det gjorde inte hans kompis åke.
                Åke och Laban skulle en dag ut och fiska. På vägen dit skrek Laban till, faaan du åke!!! det luktar kebab!!!
            </MudText>
            <MudButton Variant="Variant.Filled" Class="mt-2">Action</MudButton>
        </MudPaper>
        <MudSwitch @bind-Value="darkVisible" Label="Dark Overlay" Color="Color.Secondary" />
    </MudItem>
</MudGrid>

@code {
    private bool lightVisible;
    private bool darkVisible;
}