Dialog

A dialog will overlay your current app content, providing the user with either information, a choice, or other tasks.

Note

The Dialog is dependant on IDialogService and MudDialogProvider

Check the Installation page for instructions regarding default setup.

Usage

Suppose you define a MudDialog in TermsOfServiceDialog.razor. To show the dialog you simply call:

DialogService.Show<TermsOfServiceDialog>("Terms");

The advantage of having the dialog in its own Razor component is obviously the ability to reuse it throughout your code-base. You can pass parameters to your dialog on show which allow you to load the dialog with custom data.
Note: Even though it is technically possible to show any razor component as a dialog it is highly recommended to use a <MudDialog> as the top-level of your dialogs!

@inject IDialogService DialogService

<MudButton @onclick="OpenDialogAsync" Variant="Variant.Filled" Color="Color.Primary">
    Open Simple Dialog
</MudButton>
@code {

    private Task OpenDialogAsync()
    {
        var options = new DialogOptions { CloseOnEscapeKey = true };

        return DialogService.ShowAsync<DialogUsageExample_Dialog>("Simple Dialog", options);
    }
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙