Blazor Sonner

An opinionated toast component for Blazor.
A port of Emil Kowalski's Sonner.

GitHub

Installation

dotnet add package Blazor.Sonner

using Blazor.Sonner.Extensions;

// ...

builder.Services.AddSonner();

Add the styles to the HTML.

<link href="_content/Blazor.Sonner/styles.css" rel="stylesheet" />

Render the toaster in the root of your app.

@using Blazor.Sonner
@inject ToastService Toast

<Toaster />
<button @onclick="@(() => Toast.Show("My first toast"))">
    Give me a toast
</button>

You can customize the type of toast you want to render, and pass an options object as the second argument.

@{
  Toast.Show("Event has been created");
}

Swipe direction changes depending on the position.

<Toaster Position="@Position.BottomRight" />

You can have toasts expanded by default using the Expand parameter.

<Toaster Expand="@false" />

@{
  Toast.Success("Event has been created");

  // ...

  <Toaster RichColors="@true" />
}