Toast
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 when triggered in sequence.
Dismiss All
Clear all active toasts.
Toast Variants
Five semantic variants for different message types.
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.
- 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
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
Register the service and add the provider to your layout.
1. Register the service in Program.cs:
builder.Services.AddSingleton<IToastService, ToastService>();2. Add ToastProvider to your layout:
<ToastProvider Position="ToastPosition.BottomRight">
@Body
</ToastProvider>API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Title | string | — | Toast title text. |
| Description | string? | null | Additional detail text shown below the title. |
| Variant | ToastVariant | Default | Visual style. Options: Default, Success, Warning, Error, Info. |
| Size | ToastSize | Default | Toast size. Options: Default, Compact. |
| Duration | TimeSpan | 5s | How long the toast stays visible before auto-dismissing. |
| ActionLabel | string? | null | Text for the optional action button. |
| OnAction | Action? | null | Callback invoked when the action button is clicked. |
| ShowIcon | bool | true | Whether to show the variant icon. |
| PauseOnHover | bool | true | Whether to pause auto-dismiss when hovering over the toast. |