Blazorise Snackbar component

Snackbar provide brief messages about app processes. The component is also known as a toast.

The snackbar extension is defined of several different components:

<Snackbar> main snackbar component
- <SnackbarBody> container for the snackbar content
- <SnackbarAction> snackbar action button

Installation

NuGet

Install extension from NuGet.

Install-Package Blazorise.Snackbar

Imports

In your main _Imports.razor add:

@using Blazorise.Components
@using Blazorise.Snackbar

Static files

Include CSS link into your index.html or _Layout.cshtml / _Host.cshtml file, depending if you’re using a Blazor WebAssembly or Blazor Server side project.

<link href="_content/Blazorise.Snackbar/blazorise.snackbar.css" rel="stylesheet" />

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

Attributes

Name	Description	Type	Default
`Location`	Defines the snackbar location.	`SnackbarLocation`	`Default`
`Color`	Defines the snackbar color.	`SnackbarColor`	`Default`
`Visible`	Defines the visibility of snackbar.	`bool`	`false`
`Multiline`	Allow snackbar to show multiple lines of text.	`bool`	`false`
`Interval`	Defines the interval (in milliseconds) after which the snackbar will be automatically closed.	`double`	`5000`
`AnimationDuration`	efines the base animation duration in milliseconds.	`double`	`200`
`DelayCloseOnClick`	If clicked on snackbar, a close action will be delayed by increasing the DefaultInterval time (used if no value is provided in the Push method).	`bool`	`false`
`DelayCloseOnClickInterval`	Defines the interval(in milliseconds) by which the snackbar will be delayed from closing.	`double?`	`null`
`Closed`	Occurs after the snackbar has closed.	`EventCallback<SnackbarClosedEventArgs>`	`null`

On this page