ToastBlazor 1.0.16

ToastBlazor

Modern, lightweight, dependency‑free toast notifications for Blazor.
Built with pure C# and Razor — no JavaScript, no external libraries.

✨ Features

🚀 Zero JavaScript — 100% C# + Razor

🎨 Modern UI with multiple themes (Light, Dark, Minimal, Outline…)

🧩 Reusable <Toast> component

🌙 Light & Dark themes

🔧 Configurable positions (Top‑Right, Bottom‑Left, etc.)

⏱️ Auto‑dismiss + Infinite toasts

🎞️ Smooth animations

🖼️ Custom icons (SVG)

📦 NuGet‑ready — drop‑in component for any Blazor Web App

📦 Installation

Install via NuGet:

dotnet add package ToastBlazor

Or via Visual Studio → Manage NuGet Packages → TestNuget.

⚙️ Setup

1. Register the service in Program.cs:

   builder.Services.AddToastBlazor();
   

2. Add the container to your layout

   In MainLayout.razor:

   <ToastContainer />
   @Body
   

3. Inject the service where you want to show toasts:

   @inject IToastService Toast
   

🎨 Stylesheet

ToastBlazor includes its own CSS file.
You must reference it manually in your project.

<link rel="stylesheet" href="_content/ToastBlazor/Styles/toastblazor.css" />

🔥 Usage Examples

Success toast

Toast.Success("Profile updated successfully!");

Error toast

Toast.Error("Something went wrong.");

Custom toast

Toast.Show(new ToastOptions
{
    Title = "New message",
    Message = "You have received a new notification.",
    Duration = 5000,
    Type = ToastType.Info
});

Infinite toast

Toast.ShowInfinite("Waiting for server...", ToastLevel.Warning);

Custom icon (SVG)

Toast.Show("Custom icon", ToastLevel.Success, "<svg>...</svg>");

📊 Progress Bar

Enabled by default on timed toasts:

Toast.Show("Auto dismiss in 3s", ToastLevel.Info);

Disable it:

<ToastContainer ShowProgressBar="false" />

Or per toast:

Toast.Show("No progress bar", ToastLevel.Info, 3000, customIcon: null);

🎨 Theming | Theme | Description | | --- | --- | | Light | Classic white background | | Dark | Dark background | | Minimal | No shadow, no border | | MinimalOutline | Thin outline + colored left border |

Light mode (default)

<ToastContainer Theme="ToastTheme.Light" />

Dark mode

<ToastContainer Theme="ToastTheme.Dark" />

Minimal

<ToastContainer Theme="ToastTheme.Minimal" />

Minimal Outline

<ToastContainer Theme="ToastTheme.MinimalOutline" />

🔥 Levels

Info (blue)

Success (green)

Warning (yellow)

Error (red)

The level automatically controls:

text color

left border color

progress bar color

📍 Positioning

<ToastContainer Position="ToastPosition.BottomRight" />

Available positions:

    TopLeft

    TopRight

    BottomLeft

    BottomRight

⏱ Duration & Progress Bar

ToastService.ShowWarning("Be careful", o => o.Duration = 5000);

Infinite toast:

ToastService.ShowInfo("Always visible", o => o.Duration = -1);

🧩 Custom Icons

ToastService.ShowSuccess("OK", o =>
{
    o.CustomIcon = "<svg ...></svg>";
});

🎬 Animations

Fade

SlideFromRight

SlideFromLeft

SlideFromBottom

Zoom


ToastService.ShowError("Error", o => o.Animation = ToastAnimation.Zoom);

🧪 Demo Project

A full demo project is available on GitHub:

ToastBlazorDemo
https://github.com/alain-mathy/ToastBlazorDemo

Includes:

Basic toast examples

Success / Error / Info / Warning

Theme switching

Positioning

Custom icons

Infinite toasts

Progress bar

Animations

🛣️ Roadmap

[ ] Queued toasts

[ ] Swipe‑to‑dismiss

[ ] Accessibility improvements

🤝 Contributing

Contributions are welcome! Please open an issue or submit a pull request.

📄 License

ToastBlazor is released under the MIT License.