Snackbar extension


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



Install snackbar extension from NuGet.

Install-Package Blazorise.Snackbar


In your main Imports.razor add:

@using Blazorise.Snackbar

Static files

Include CSS link into your index.html or _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.

<Button Clicked="@(()=>snackbar.Show())">Snackbar</Button>

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

    Snackbar snackbar;

Variant snackbars

You can also define variant colors to override default snackbar style.

<Button Color="Color.Primary" Clicked="@(()=>snackbarPrimary.Show())">Primary</Button>
<Button Color="Color.Secondary" Clicked="@(()=>snackbarSecondary.Show())">Secondary</Button>

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


Name Type Default Description
Location SnackbarLocation None Defines the snackbar location.
Color SnackbarColor None Defines the snackbar color.
Visible bool false Defines the visibility of snackbar.
Multiline bool false Allow snackbar to show multiple lines of text.
Interval double 3000 Defines the interval(in milliseconds) after which the snackbar will be automatically closed.
Closed event   Occurs after the snackbar has closed.