MudBlazor

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

MessageBox

Message box is used for quick user confirmation actions.

See MessageBox API for parameter documentation.

Message Box

The simplest way to show a message box is to use IDialogService.ShowMessageBox. It is a purely procedural way of showing a message box and awaiting the user's decision. The number of buttons (Yes, No, Cancel) and their text are simply controlled via providing a string or leaving them null. The result is a nullable bool which corresponds directly to the buttons: Yes => true, No => false, Cancel => null.

Message box hasn't been opened yet
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudButton Variant="Variant.Filled" Color="Color.Error" OnClick="OnButtonClicked" >Delete</MudButton>

<MudChip>@state</MudChip>
@code
{
    [Inject] private IDialogService DialogService { get; set; }

    string state = "Message box hasn't been opened yet";


    private async void OnButtonClicked()
    {
        bool? result = await DialogService.ShowMessageBox(
            "Warning", 
            "Deleting can not be undone!", 
            yesText:"Delete!", cancelText:"Cancel");
        state= result==null ? "Cancelled" : "Deleted!";
        StateHasChanged();
    }
}

Custom Message Box

MudMessageBox can also be inlined in Razor to be able to customize all its properties with render fragments. The following example shows how we customize the Yes button's color and icon. All visual elements of the message box can be customized. For Title there is TitleContent, for Message there is MessageContent, etc.

Message box hasn't been opened yet
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudButton Variant="Variant.Filled" Color="Color.Error" OnClick="OnButtonClicked" >Delete</MudButton>
<MudChip>@state</MudChip>

<MudMessageBox @ref="mbox" Title="Warning" CancelText="Cancel">
    <MessageContent>
        Deleting can <b><i>not</i></b> be undone!
    </MessageContent>
    <YesButton>
        <MudButton Variant="Variant.Filled" Color="Color.Error" StartIcon="@Icons.Material.Filled.DeleteForever">Delete!</MudButton>
    </YesButton>
</MudMessageBox>
@code
{
    MudMessageBox mbox { get; set; }
    string state = "Message box hasn't been opened yet";

    private async void OnButtonClicked()
    {
        bool? result = await mbox.Show();
        state= result==null ? "Cancelled" : "Deleted!";
        StateHasChanged();
    }
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙