Blazorise Snackbar component

Give users brief feedback with an optional action.

Use a snackbar for status updates, confirmations, or a short message with an action such as Undo.

Structure

A Snackbar combines a message body with an optional action button.

  • <Snackbar>Controls the notification and its visibility.
    • <SnackbarBody>Contains the message.
    • <SnackbarAction>An optional action button.

To use the Snackbar component, install the Blazorise.Snackbar package first.

Snackbar has its own default styling and is not provider-native. If the application does not define theme color variables, Snackbar falls back to its bundled colors. Defining Theme.ColorOptions, including new() without explicit color assignments, enables the default Blazorise theme colors and generates Snackbar color variables.

Installation

NuGet

Install extension from NuGet. 
dotnet add package Blazorise.Snackbar

Imports

In your main _Imports.razor add: 
@using Blazorise.Components
@using Blazorise.Snackbar

Static files

Add these links inside the <head> section: 
<link href="_content/Blazorise.Snackbar/blazorise.snackbar.css?v=2.4.2.0" rel="stylesheet" />
Update wwwroot/index.html.

Basic example

A basic snackbar that aims to reproduce standard snackbar behavior.
Single line of text directly related to the operation performed 
<Button Clicked="@(()=>snackbar.Show())">Snackbar</Button>

<Snackbar @ref="snackbar">
    <SnackbarBody>
        Single line of text directly related to the operation performed
    </SnackbarBody>
</Snackbar>

@code{
    Snackbar snackbar;
}

Variant snackbars

You can also define variant colors to override default snackbar style.
Single line of text directly related to the operation performed
Single line of text directly related to the operation performed 
<Button Color="Color.Primary" Clicked="@(()=>snackbarPrimary.Show())">Primary</Button>
<Button Color="Color.Secondary" Clicked="@(()=>snackbarSecondary.Show())">Secondary</Button>

<Snackbar @ref="snackbarPrimary" Color="SnackbarColor.Primary">
  <SnackbarBody>
    Single line of text directly related to the operation performed
    <SnackbarAction Clicked="@(()=>snackbarPrimary.Hide())">ACTION</SnackbarAction>
  </SnackbarBody>
</Snackbar>
<Snackbar @ref="snackbarSecondary" Color="SnackbarColor.Secondary">
  <SnackbarBody>
    Single line of text directly related to the operation performed
    <SnackbarAction Clicked="@(()=>snackbarSecondary.Hide())">ACTION</SnackbarAction>
  </SnackbarBody>
</Snackbar>

@code{
    private Snackbar snackbarPrimary;
    private Snackbar snackbarSecondary;
}

Stacked snackbars

When you want to show multiple snackbars stacked on top of each other you can use a wrapper component SnackbarStack. You can specify Action<SnackbarOptions> options when calling PushAsync() in order to specify the Snackbar parameters available below. 
<Button Color="Color.Primary" Clicked="@(()=>snackbarStack.PushAsync("Current time is: " + DateTime.Now, SnackbarColor.Info))">Primary</Button>

<Button Color="Color.Info" Clicked="@(()=>snackbarStack.PushAsync("Some info message! Timeout: " + intervalBeforeMsgClose, SnackbarColor.Info, options => {  options.IntervalBeforeClose = intervalBeforeMsgClose; } ))">Show Info</Button>

<SnackbarStack @ref="snackbarStack" Location="SnackbarStackLocation.BottomEnd" />

@code{
    SnackbarStack snackbarStack;
    double intervalBeforeMsgClose = 2000;
}

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page