Dialog - MudBlazor

API

The Dialog component relies on IDialogService and MudDialogProvider for its functionality.

See the Installation page for setup instructions.

Usage

To use a dialog, define a MudDialog in a Razor component (e.g., TermsOfServiceDialog.razor). Show it by calling:

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

This approach lets you reuse dialogs throughout your app and pass parameters for customization.

Tip: For best results, use <MudDialog> as the root element of your dialog component.

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

Configuration

You can change dialog behavior globally by setting parameters on <MudDialogProvider/>, or per dialog by passing a DialogOptions instance when opening a dialog.

Templating and Passing Simple Data

Build a reusable dialog and pass simple data to it for different scenarios.

@inject IDialogService DialogService


<MudButton @onclick="DeleteUserAsync" Variant="Variant.Filled" Color="Color.Error">Delete records</MudButton>
<MudButton @onclick="ConfirmAsync" Variant="Variant.Filled" Color="Color.Success">Remove email</MudButton>
<MudButton @onclick="DownloadAsync" Variant="Variant.Filled" Color="Color.Warning">Slow computer</MudButton>

@code {

    private Task DeleteUserAsync()
    {
        var parameters = new DialogParameters<DialogTemplateExample_Dialog>
        {
            { x => x.ContentText, "Do you really want to delete these records? This process cannot be undone." },
            { x => x.ButtonText, "Delete" },
            { x => x.Color, Color.Error }
        };

        var options = new DialogOptions() { CloseButton = true, MaxWidth = MaxWidth.ExtraSmall };

        return DialogService.ShowAsync<DialogTemplateExample_Dialog>("Delete", parameters, options);
    }

    private Task ConfirmAsync()
    {
        var parameters = new DialogParameters<DialogTemplateExample_Dialog>
        {
            { x => x.ContentText, "Are you sure you want to remove thisguy@emailz.com from this account?" },
            { x => x.ButtonText, "Yes" },
            { x => x.Color, Color.Success }
        };

        return DialogService.ShowAsync<DialogTemplateExample_Dialog>("Confirm", parameters);
    }

    private Task DownloadAsync()
    {
        var parameters = new DialogParameters<DialogTemplateExample_Dialog>
        {
            { x => x.ContentText, "Your computer seems very slow, click the download button to download free RAM." },
            { x => x.ButtonText, "Download" },
            { x => x.Color, Color.Info }
        };

        return DialogService.ShowAsync<DialogTemplateExample_Dialog>("Slow Computer Detected", parameters);
    }
}