Toast Component

A succinct message that is displayed temporarily. Also known as notifications or snackbars.

Default Toast

Show a simple toast notification.

Toast with Action

Include an action button in the toast.

Custom Duration

Control how long the toast stays visible.

Multiple Toasts

Toasts stack automatically.

Dismiss All

Clear all active toasts.

Toast Variants

Toast Sizes

Choose between default and compact sizes.

Variant Icons

Toasts automatically show icons based on variant. You can disable them if needed.

Pause on Hover

Toasts pause auto-dismiss when you hover over them. Try hovering to read the message!

Advanced Customization

Combine multiple options for granular control.

Features

Multiple variants: Default, Success, Warning, Error, Info
Two sizes: Default and Compact
Auto variant icons (Success ✓, Error ✗, Warning ⚠, Info ℹ)
Pause on hover (prevents auto-dismiss while reading)
Programmatic API via IToastService
Auto-dismiss with configurable duration
Optional action buttons
Toast stacking with MaxToasts limit
Configurable viewport position
Accessible with ARIA live regions

Setup

1. Register the service in Program.cs:

builder.Services.AddSingleton<IToastService, ToastService>();

2. Add ToastProvider to your layout:

<ToastProvider Position="ToastPosition.BottomRight">
    @Body
</ToastProvider>

Installation

@using BlazorUI.Components.Toast

Usage

@inject IToastService Toasts

<Button @onclick="ShowToast">Show Toast</Button>

@code {
    // Simple usage with service methods
    private void ShowToast()
    {
        Toasts.Success("Saved!", "Your changes have been saved.");
    }

    // Using static factory methods
    private void ShowWithFactory()
    {
        Toasts.Show(ToastOptions.Success("Saved!", "Your changes have been saved."));
    }

    // Compact toast for dialogs
    private void ShowInDialog()
    {
        Toasts.Show(ToastOptions.Compact(
            "Changes saved",
            "Your profile has been updated",
            ToastVariant.Success,
            ToastPosition.BottomCenter
        ));
    }

    // With action button
    private void ShowWithAction()
    {
        Toasts.Show(new ToastOptions
        {
            Title = "Event scheduled",
            Description = "Your meeting has been scheduled.",
            ActionLabel = "Undo",
            OnAction = () => Console.WriteLine("Undo clicked!")
        });
    }

    // Advanced customization
    private void ShowCustomized()
    {
        Toasts.Show(new ToastOptions
        {
            Title = "Custom Toast",
            Description = "Fully customized with all options.",
            Variant = ToastVariant.Success,
            Size = ToastSize.Compact,
            ShowIcon = true,
            PauseOnHover = true,
            Duration = TimeSpan.FromSeconds(8)
        });
    }
}