MudBlazor

Snackbar

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

@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.
However, make sure not to use user-provided input, as that's not very secure.

@inject ISnackbar Snackbar

<MudButton Variant="Variant.Filled" Color="Color.Primary" @onclick="@(() => Snackbar.Add($"<ul><li>Item {++count}</li><li>Item {++count}</li></ul>"))">
    Open Snackbar
</MudButton>
@code
{
    private int count = 0;
}

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.

@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 Snackbar's default behavior can be changed in two ways, either globally when the service is registered or by passing 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 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.

@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

@inject ISnackbar Snackbar

<MudButton @onclick="@(() => ChangePosition("Top-Start", Defaults.Classes.Position.TopStart))" Color="Color.Primary" >Top-Start</MudButton>
<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("Top-End", Defaults.Classes.Position.TopEnd))" Color="Color.Primary" >Top-End</MudButton>
<MudSpacer/>
<MudButton @onclick="@(() => ChangePosition("Bottom-Start", Defaults.Classes.Position.BottomStart))" Color="Color.Default" >Bottom-Start</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>
<MudButton @onclick="@(() => ChangePosition("Bottom-End", Defaults.Classes.Position.BottomEnd))" Color="Color.Default" >Bottom-End</MudButton>
@code {
    void ChangePosition(string message, string position)
    {
        Snackbar.Clear();
        Snackbar.Configuration.PositionClass = position;
        Snackbar.Add(message, Severity.Normal);
    }
}

Snackbar Variants

@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

The snackbar's default behavior is to remain visible until the user closes the snackbar. When CloseAfterNavigation is set to true a snackbar will close after a user navigates away from the current page. Click both snackbars in the example and then navigate to another component to see this example in action.

@inject ISnackbar Snackbar

<MudButton Variant="Variant.Filled" Color="Color.Primary" @onclick="@AddCloseAfterNavSnackbar">
   Closes After Navigation
</MudButton>

<MudButton Variant="Variant.Filled" Color="Color.Primary" @onclick="@AddSnackbar">
    Default Snackbar
</MudButton>
@code{
    public void AddSnackbar()
    {
        Snackbar.Add("Remains open after navigation.", Severity.Normal);
    }

    public void AddCloseAfterNavSnackbar()
    {
        Snackbar.Add("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.

@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.

@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 disappear until the user interacts with it.

Fuel Rod Temperature: 600C
@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();
    }
}

No Icon

@inject ISnackbar Snackbar

<MudButton Variant="Variant.Filled" Color="Color.Primary" @onclick="@(() => Snackbar.Add("Snackbar with no icon.", Severity.Success, config => { config.HideIcon = true; }))">
    Open Snackbar
</MudButton>

Custom Icon

@inject ISnackbar Snackbar

<MudButton Variant="Variant.Filled" Color="Color.Primary" @onclick="@(() => Snackbar.Add("Snackbar with a custom icon.", Severity.Info, config => { config.Icon = Icons.Custom.Brands.GitHub; }))">
    Open Snackbar
</MudButton>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙