Mudblazor

Community Support

Discord

Gitter

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

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Snackbar

See Snackbar API for parameter documentation.

Note

The Snackbar is dependant on ISnackbar service and MudSnackbarProvider.

Check the Installation page for instructions regarding default setup.

Usage

This is the simplest way of using the Snackbar. It provides the user with a temporary closable Snackbar

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
@inject ISnackbar Snackbar

<MudButton Variant="Variant.Filled" Color="Color.Primary" @onclick="@(() => Snackbar.Add("Simple Snackbar"))">
    Open Snackbar
</MudButton>

Html in messages

Snackbar messages are rendered as HTML using MarkupString.
Howerver, make sure not to use user-provided input, as that's not very secure.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
@inject ISnackbar Snackbar

<MudButton Variant="Variant.Filled" Color="Color.Primary" @onclick="@(() => Snackbar.Add("<ul><li>Item 1</li><li>Item 2</li></ul>"))">
    Open Snackbar
</MudButton>

Alerts and Severity

By default no Severity property has to be passed and the snackbar uses the normal level.
To change the snackbar into an alert snackbar, simply pass down the Severity enum after the message.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
@inject ISnackbar Snackbar


<MudButton Color="Color.Dark" @onclick="@(() => Snackbar.Add("The reactor type is RBMK-1000", Severity.Normal))">Normal Snackbar</MudButton>
<MudButton Color="Color.Info" @onclick="@(() => Snackbar.Add("The reactor was fired up successfully", Severity.Info))">Info Snackbar</MudButton>
<MudButton Color="Color.Success" @onclick="@(() => Snackbar.Add("The reactor is running at optimum temperature", Severity.Success))">Success Snackbar</MudButton>
<MudButton Color="Color.Warning" @onclick="@(() => Snackbar.Add("The reactor temperature exceeds the optimal range", Severity.Warning))">Warning Snackbar</MudButton>
<MudButton Color="Color.Error" @onclick="@(() => Snackbar.Add("Reactor meltdown is imminent", Severity.Error))">Error Snackbar</MudButton>

Configuration

The Snackbars default behavior can be changed in two ways, either globaly when the service is registered or pass down the SnackbarConfiguration class with the changes you want to make.

1. Global Service Settings

In either Program.Main or Startup.cs depending on what kind of project you have. See installation page for more information regarding this.

using MudBlazor.Services;

services.AddMudServices(config =>
{
    config.SnackbarConfiguration.PositionClass = Defaults.Classes.Position.BottomLeft;

    config.SnackbarConfiguration.PreventDuplicates = false;
    config.SnackbarConfiguration.NewestOnTop = false;
    config.SnackbarConfiguration.ShowCloseIcon = true;
    config.SnackbarConfiguration.VisibleStateDuration = 10000;
    config.SnackbarConfiguration.HideTransitionDuration = 500;
    config.SnackbarConfiguration.ShowTransitionDuration = 500;
    config.SnackbarConfiguration.SnackbarVariant = Variant.Filled;
});

2. Per Snackbar

This can be done in many ways, below is one of them and we will continue to use it use it further down on this page.
Below we pass along a modified configuration that differs from our globally set ShowCloseIcon in this case it's also the Snackbar's default value.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
@inject ISnackbar Snackbar

<MudButton @onclick="@(() => Snackbar.Add("My Close button is gone!", Severity.Normal, config => { config.ShowCloseIcon = false; }))" Variant="Variant.Filled" Color="Color.Primary">
    Open Modified Snackbar
</MudButton>

Snackbar Position

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
@inject ISnackbar Snackbar

<MudButton @onclick="@(() => ChangePosition("Top-Left", Defaults.Classes.Position.TopLeft))" Color="Color.Primary" >Top-Left</MudButton>
<MudButton @onclick="@(() => ChangePosition("Top-Center", Defaults.Classes.Position.TopCenter))" Color="Color.Primary" >Top-Center</MudButton>
<MudButton @onclick="@(() => ChangePosition("Top-Right", Defaults.Classes.Position.TopRight))" Color="Color.Primary" >Top-Right</MudButton>
<MudButton @onclick="@(() => ChangePosition("Bottom-Left", Defaults.Classes.Position.BottomLeft))" Color="Color.Default" >Bottom-Left</MudButton>
<MudButton @onclick="@(() => ChangePosition("Bottom-Center", Defaults.Classes.Position.BottomCenter))" Color="Color.Default" >Bottom-Center</MudButton>
<MudButton @onclick="@(() => ChangePosition("Bottom-Right", Defaults.Classes.Position.BottomRight))" Color="Color.Default" >Bottom-Right</MudButton>
@code {
    void ChangePosition(string message, string position)
    {
        Snackbar.Clear();
        Snackbar.Configuration.PositionClass = position;
        Snackbar.Add(message, Severity.Normal);
    }
}

Snackbar Variants

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
@inject ISnackbar Snackbar

<MudButton @onclick="@(() => ChangeVariant("Text Snackbar", Variant.Text))" Color="Color.Primary">Open Text Snackbar Variants</MudButton>
<MudButton @onclick="@(() => ChangeVariant("Filled Snackbar", Variant.Filled))" Color="Color.Secondary">Open Filled Snackbar Variants</MudButton>
<MudButton @onclick="@(() => ChangeVariant("Outlined Snackbar", Variant.Outlined))" Color="Color.Tertiary">Open Outlined Snackbar Variants</MudButton>
@code {
    void ChangeVariant(string message, Variant variant)
    {
        Snackbar.Configuration.SnackbarVariant = variant;
        Snackbar.Configuration.MaxDisplayedSnackbars = 10;
        Snackbar.Add($"Normal {message}", Severity.Normal);
        Snackbar.Add($"Info {message}", Severity.Info);
        Snackbar.Add($"Success {message}", Severity.Success);
        Snackbar.Add($"Warning {message}", Severity.Warning);
        Snackbar.Add($"Error {message}", Severity.Error);
    }
}

Close after navigation

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
@inject ISnackbar Snackbar

<MudButton Variant="Variant.Filled" Color="Color.Primary" @onclick="@AddSnackbar">
    Open Snackbar
</MudButton>
@code{
    public void AddSnackbar()
    {
        Snackbar.Add("Snackbar will close after navigation.", Severity.Normal, (options)=>
        {
            options.CloseAfterNavigation = true;
        });
    }
}

Custom Action Handling

A snackbar becomes clickable when a handler is defined in the OnClick property of the SnackbarOptions object.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
@inject ISnackbar Snackbar

<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@Show">
    Open Clickable Snackbar
</MudButton>
@code {

    void Show()
    {
        Snackbar.Add("I got a message for you", Severity.Normal, config =>
        {
            config.Onclick = snackbar =>
            {
                SayHello();
                return Task.CompletedTask;
            };
        });
    }

    public void SayHello()
    {
        Snackbar.Add("Hello World!");
    }
}

Alternatively, the OnClick handler can be attached to an action button by setting a label in the Action property.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
@inject ISnackbar Snackbar

<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@Show">
    Open Action Snackbar
</MudButton>
@code {

    void Show()
    {
        Snackbar.Add("Ooops. Something really bad happened!", Severity.Normal, config =>
        {
            config.Action = "Help";
            config.ActionColor = Color.Primary;
            config.Onclick = snackbar =>
            {
                Help();
                return Task.CompletedTask;
            };
        });
    }

    public void Help()
    {
        Snackbar.Add("Please check the reactor temperature and try again");
    }
}

Require Interaction

With the RequireInteraction property set to true the snackbar will not dissapear until the user interacts with it.

The reactor temperature exceeds the optimal range
Reactor meltdown is imminent!
Fuel Rod Temperature: 600C
Reactor Shutdown
The reactor is about to have a meltdown deputy chief-engineer! You must act now!
Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
@inject ISnackbar Snackbar

<div class="pa-0 ma-0">
    <MudAlert Severity="Severity.Warning" Dense="true" Class="rounded-0 rounded-t">The reactor temperature exceeds the optimal range</MudAlert>
    <MudAlert Severity="Severity.Error" Dense="true" Class="rounded-0">Reactor meltdown is imminent!</MudAlert>
    <div class="d-flex flex-column" style="height: 200px;">
        <div class="align-self-center mt-12">
            <MudText Typo="Typo.h6">Fuel Rod Temperature: @FuelRodTemperature.ToString()C</MudText>
        </div>
        <div class="align-self-center mt-6">
            <MudTooltip Text="Reactor Shutdown">
                <MudButton Variant="Variant.Filled" DisableElevation="true" Color="Color.Error" @onclick="@(() => ShutDown())">Scram Button</MudButton>
            </MudTooltip>
        </div>
    </div>
    <MudAlert Severity="Severity.Info" Dense="true" Class="rounded-0 rounded-b">The reactor is about to have a meltdown deputy chief-engineer! You must act now!</MudAlert>
</div>
@code {

    public int FuelRodTemperature { get; set; } = 600;

    void ShutDown()
    {
        string message = "Scram Initiated!";
        Snackbar.Add(message, Severity.Success, config =>
        {
            config.RequireInteraction = true;
            config.ShowCloseIcon = false;
            config.Onclick = snackbar =>
            {
                UpdateTemperature();
                return Task.CompletedTask;
            };
        });
    }

    public void UpdateTemperature()
    {
        FuelRodTemperature += 100;
        Snackbar.Add("Temperature is still going up!", Severity.Warning);
        StateHasChanged();
    }
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙