SbToastHost

A container component that manages and displays toast notifications. Handles positioning, stacking, auto-dismissal, and animations for multiple toasts. Place one instance in your layout to enable toast notifications throughout your application.

Parameters

Parameter	Type	Default	Description
Position	SbToastPosition	TopRight	Position of the toast container
DefaultDuration	int	5000	Default auto-dismiss duration in milliseconds
MaxToasts	int	5	Maximum number of toasts to display simultaneously
Class	string?	null	Additional CSS classes

Position Options

Value	Description
TopLeft	Top-left corner
TopCenter	Top-center
TopRight	Top-right corner (default)
BottomLeft	Bottom-left corner
BottomCenter	Bottom-center
BottomRight	Bottom-right corner

Methods

Method	Parameters	Description
ShowAsync	message, severity?, title?, duration?	Shows a toast with specified options
ShowInfoAsync	message, title?	Shows an info toast
ShowSuccessAsync	message, title?	Shows a success toast
ShowWarningAsync	message, title?	Shows a warning toast
ShowErrorAsync	message, title?	Shows an error toast
Clear	-	Removes all active toasts

CSS Classes

sb-toast-host - Base class
sb-toast-host--top-left - Top-left position
sb-toast-host--top-center - Top-center position
sb-toast-host--top-right - Top-right position
sb-toast-host--bottom-left - Bottom-left position
sb-toast-host--bottom-center - Bottom-center position
sb-toast-host--bottom-right - Bottom-right position
sb-toast-host__item - Individual toast wrapper
sb-toast-host__item--entering - Toast entering animation
sb-toast-host__item--leaving - Toast leaving animation

Examples

Basic Setup

Place the toast host in your main layout (e.g., MainLayout.razor):

@inherits LayoutComponentBase

<div class="page">
    <SbToastHost @ref="ToastHost" Position="SbToastPosition.TopRight" />
    
    @Body
</div>

@code {
    public SbToastHost? ToastHost { get; set; }
}

Show Different Toast Types

<SbButton OnClick="ShowInfo">Info</SbButton>
<SbButton OnClick="ShowSuccess">Success</SbButton>
<SbButton OnClick="ShowWarning">Warning</SbButton>
<SbButton OnClick="ShowError">Error</SbButton>

@code {
    [CascadingParameter]
    public MainLayout? Layout { get; set; }
    
    private SbToastHost? ToastHost => Layout?.ToastHost;
    
    private async Task ShowInfo()
    {
        await ToastHost!.ShowInfoAsync("This is an informational message.");
    }
    
    private async Task ShowSuccess()
    {
        await ToastHost!.ShowSuccessAsync("Operation completed successfully!", "Success");
    }
    
    private async Task ShowWarning()
    {
        await ToastHost!.ShowWarningAsync("Please review your changes.", "Warning");
    }
    
    private async Task ShowError()
    {
        await ToastHost!.ShowErrorAsync("An error occurred. Please try again.", "Error");
    }
}

Custom Duration

@* Toast that stays for 10 seconds *@
await ToastHost.ShowAsync(
    "This toast will stay longer.",
    SbToastSeverity.Info,
    "Notice",
    duration: 10000
);

@* Toast that doesn't auto-dismiss (duration = 0) *@
await ToastHost.ShowAsync(
    "This toast won't auto-dismiss.",
    SbToastSeverity.Warning,
    "Manual Close Required",
    duration: 0
);

Different Positions

@* Top-left *@
<SbToastHost Position="SbToastPosition.TopLeft" />

@* Bottom-center *@
<SbToastHost Position="SbToastPosition.BottomCenter" />

@* Bottom-right *@
<SbToastHost Position="SbToastPosition.BottomRight" />

Configuration Options

<SbToastHost @ref="toastHost"
             Position="SbToastPosition.TopRight"
             DefaultDuration="3000"
             MaxToasts="3" />

Using with a Toast Service

For a more scalable approach, create a toast service:

// IToastService.cs
public interface IToastService
{
    event Func<string, SbToastSeverity, string?, int?, Task>? OnShow;
    Task ShowAsync(string message, SbToastSeverity severity = SbToastSeverity.Info, 
                   string? title = null, int? duration = null);
    Task ShowInfoAsync(string message, string? title = null);
    Task ShowSuccessAsync(string message, string? title = null);
    Task ShowWarningAsync(string message, string? title = null);
    Task ShowErrorAsync(string message, string? title = null);
}

// ToastService.cs
public class ToastService : IToastService
{
    public event Func<string, SbToastSeverity, string?, int?, Task>? OnShow;
    
    public Task ShowAsync(string message, SbToastSeverity severity = SbToastSeverity.Info,
                          string? title = null, int? duration = null)
        => OnShow?.Invoke(message, severity, title, duration) ?? Task.CompletedTask;
    
    public Task ShowInfoAsync(string message, string? title = null)
        => ShowAsync(message, SbToastSeverity.Info, title);
    
    public Task ShowSuccessAsync(string message, string? title = null)
        => ShowAsync(message, SbToastSeverity.Success, title);
    
    public Task ShowWarningAsync(string message, string? title = null)
        => ShowAsync(message, SbToastSeverity.Warning, title);
    
    public Task ShowErrorAsync(string message, string? title = null)
        => ShowAsync(message, SbToastSeverity.Error, title);
}

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

Connect in layout:

@inject IToastService ToastService

<SbToastHost @ref="toastHost" />

@code {
    private SbToastHost? toastHost;
    
    protected override void OnInitialized()
    {
        ToastService.OnShow += async (msg, sev, title, dur) =>
        {
            await toastHost!.ShowAsync(msg, sev, title, dur);
        };
    }
}

Use anywhere:

@inject IToastService ToastService

<SbButton OnClick="SaveData">Save</SbButton>

@code {
    private async Task SaveData()
    {
        // ... save logic ...
        await ToastService.ShowSuccessAsync("Data saved successfully!");
    }
}

Clear All Toasts

<SbButton OnClick="() => toastHost?.Clear()">Clear All Toasts</SbButton>

Form Submission Example

<SbForm OnValidSubmit="HandleSubmit">
    <SbTextField @bind-Value="name" Label="Name" Required="true" />
    <SbButton Type="submit">Submit</SbButton>
</SbForm>

@code {
    private string name = "";
    
    private async Task HandleSubmit()
    {
        try
        {
            await SaveAsync();
            await ToastHost!.ShowSuccessAsync("Form submitted successfully!");
        }
        catch (Exception ex)
        {
            await ToastHost!.ShowErrorAsync($"Error: {ex.Message}", "Submission Failed");
        }
    }
}

6.8 KiB Raw Blame History