Services

TwToastProvider

TwToast is a Blazor toast notification service. Call ITwToastService.Show with a message, title, Color and icon, with duration, persistence and custom toasts.

Last updated 26 September 2026

Setup

The Toast service provides a simple way to display temporary notification messages to users. To use toasts, add the TwToastProvider component to your app and inject the ITwToastService.

1. Add TwToastProvider to your layout

Place the <TwToastProvider /> component in your main layout file (e.g., MainLayout.razor or App.razor):

HTML

<TwToastProvider />

2. Register the services

The toast service is registered automatically when you call AddTwBlazor() with your configured theme (see Get Started for the full theme setup):

CSHARP

builder.Services.AddTwBlazor(_ => { }, Theme.CreateDefaultTheme);

3. Inject the service in your component

CSHARP

@inject ITwToastService ToastService

Toast Types

The toast service provides convenient methods for common notification types: Success, Error, Warning, and Info.

Razor

<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
    <TwButton Label="Success" Color="Color.Success" OnClick="ShowSuccessToast" Class="w-full" />
    <TwButton Label="Error" Color="Color.Danger" OnClick="ShowErrorToast" Class="w-full" />
    <TwButton Label="Warning" Color="Color.Warning" OnClick="ShowWarningToast" Class="w-full" />
    <TwButton Label="Info" Color="Color.Primary" OnClick="ShowInfoToast" Class="w-full" />
</div>

CSHARP

@code {
    private void ShowSuccessToast()
    {
        ToastService.ShowSuccess("Success!", "Your operation completed successfully.");
    }
    
    private void ShowErrorToast()
    {
        ToastService.ShowError("Error", "Something went wrong.", 0);
    }
    
    private void ShowWarningToast()
    {
        ToastService.ShowWarning("Warning", "Please review your input.");
    }
    
    private void ShowInfoToast()
    {
        ToastService.ShowInfo("Information", "Here's some useful information.");
    }
}

Custom Toasts

Create custom toasts with any color, icon, and duration using the Show() method, or build a ToastModel directly for full control.

Razor

<TwButton Label="Show Custom Toast" Color="Color.Accent" OnClick="ShowCustomToast" Class="w-full" />

CSHARP

@code {
    private void ShowCustomToast()
    {
        ToastService.Show("Custom Toast", "This is a custom toast with a heart icon!", Color.Accent, Icon.Heart, 3000);
    }
}

Razor

<TwButton Label="Show Manual Toast" Color="Color.Primary" OnClick="ShowManualToast" Class="w-full" />

CSHARP

@code {
    private void ShowManualToast()
    {
        ToastService.AddToast(new ToastModel
        {
            Title = "Manual Toast",
            Message = "Created with ToastModel directly",
            Color = Color.Primary,
            Icon = Icon.Bell,
            Duration = 5000
        });
    }
}

Colors

Toasts support every color in the Color enum, sharing the same palette as TwAlert.

Razor

<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2">
    @foreach (Color c in (Color[])Enum.GetValues(typeof(Color)))
    {
        <TwButton Label="@c.ToString()" Color="@c" OnClick="@(() => ShowColorToast(c))" Variant="ButtonVariant.Filled" Class="text-xs" />
    }
</div>

CSHARP

@code {
    private void ShowColorToast(Color color)
    {
        ToastService.Show($"{color} Toast", $"This is a {color.ToString().ToLower()} colored toast", color, Icon.Palette, 3000);
    }
}

Duration & Persistence

By default, toasts auto-dismiss after 5 seconds. Customize the duration per toast, or set it to 0 to make it persistent until manually dismissed.

Razor

<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
    <TwButton Label="3 Second Toast" Color="Color.Success" OnClick="@(() => ShowDurationToast(3000))" Class="w-full" />
    <TwButton Label="5 Second Toast (Default)" Color="Color.Primary" OnClick="@(() => ShowDurationToast(5000))" Class="w-full" />
    <TwButton Label="Persistent Toast" Color="Color.Accent" OnClick="ShowPersistentToast" Class="w-full" />
</div>

CSHARP

@code {
    private void ShowDurationToast(int duration)
    {
        var seconds = duration / 1000;
        ToastService.Show($"{seconds} Second Toast", $"This toast will dismiss after {seconds} seconds", Color.Success, Icon.Clock, duration);
    }
    
    private void ShowPersistentToast()
    {
        ToastService.Show("Persistent Toast", "This toast won't auto-dismiss. Click the X to close.", Color.Accent, Icon.Info_Circle, 0);
    }
}

Managing Toasts

Clear all active toasts programmatically using the ClearAll() method.

Razor

<div class="flex gap-2 mb-2">
    <TwButton Label="Show Multiple Toasts" Color="Color.Primary" OnClick="ShowMultipleToasts" />
    <TwButton Label="Clear All Toasts" Color="Color.Danger" OnClick="@(() => ToastService.ClearAll())" Variant="ButtonVariant.Outlined" />
</div>

CSHARP

@code {
    private void ShowMultipleToasts()
    {
        ToastService.ShowSuccess("First Toast", "This is the first toast");
        ToastService.ShowInfo("Second Toast", "This is the second toast");
        ToastService.ShowWarning("Third Toast", "This is the third toast");
    }
}

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwToastTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`ToastRounded`	Rounded?
`Container`	string
`Toast`	string
`HeaderClasses`	string
`Title`	string
`Message`	string
`Timestamp`	string
`IconContainer`	string
`CloseButton`	string
`ToastWidth`	string

Global Theme Configuration

These reuse shared design tokens configured once on TwBlazorTheme, rather than being unique to this component.

Property	Type	Controls
`Colors`	TwBlazorPalette

For example, to move toasts to the top-right and make them fully rounded:

CSHARP

@code {
    builder.Services.AddTwBlazor(options =>
    {
        options.Theme.Toast.Container = "fixed top-0 right-0 p-4 z-50 flex flex-col gap-2 max-w-md"; // Move to top-right
        options.Theme.Toast.ToastRounded = Rounded.Full; // Make toasts fully rounded
        options.Theme.Toast.ToastWidth = "w-96 max-w-full"; // Wider toasts
    }, Theme.DefaultTheme);
}

Duration isn't themed - it's passed per call via Show(..., duration) or ToastModel.Duration (default 5000ms, 0 = persistent). See the Theme page for the full colour and design-token reference.

Full reference: TwToastTheme on the API docs.