Toast
Displays a temporary notification popup message.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Toast />
When to Use
- Show non-blocking notifications that do not interrupt the user's workflow.
- Confirm the result of an action such as saving, copying, or deleting.
- Display async operation results like API responses or background task completions.
Pick a variant then show a toast to see it applied live.
Pick a position then click Show to see where the toast appears.
Mobile (rc.49). The dismiss button is now always visible and 44×44 px on small screens (
opacity-100 sm:opacity-0 sm:group-hover:opacity-100), meeting the WCAG touch-target minimum without requiring a hover.
Hover/focus pauses auto-dismiss. Toasts pause their auto-dismiss timer while the toast is hovered
or any element inside it has focus, then resume on leave / blur. Users get the full reading window even on a
short
Duration, and keyboard users can tab
to an action without the toast vanishing under them.
Variant-aware ARIA role.
Destructive
toasts render as role="alert" with
aria-live="assertive" so screen readers
interrupt and announce errors immediately. All other variants render as
role="status" with
aria-live="polite", queuing alongside the
current speech rather than cutting in.
Parameter Coverage
Every ToastVariant rendered statically (without going through ToastService).
ToastVariant
Default
Default
Static preview of the Default toast variant.
Success
Success
Static preview of the Success toast variant.
Destructive
Destructive
Static preview of the Destructive toast variant.
Warning
Warning
Static preview of the Warning toast variant.
Info
Info
Static preview of the Info toast variant.
API Reference
Toast
| Property | Type | Default | Description |
|---|---|---|---|
| Variant | ToastVariant | Default | Visual style of the toast. Values: Default, Success, Destructive, Warning, Info. |
ToastOptions
| Property | Type | Default | Description |
|---|---|---|---|
| Title | string | — | The main heading text of the toast. |
| Description | string? | null | Optional secondary text displayed below the title. |
| Duration | int | 5000 | Auto-dismiss duration in milliseconds. Set to 0 to disable auto-dismiss. |
| Dismissible | bool | true | Whether the toast can be manually dismissed by the user. |
| ActionLabel | string? | null | Label text for the optional action button. |
| OnAction | Action? | null | Callback invoked when the action button is clicked. |
| Position | ToastPosition? | null | Per-toast position override. When null the toast inherits the position from the ToastProvider. |
| Variant | ToastVariant | Default | Visual style. Values: Default, Success, Destructive, Warning, Info. |
ToastService
| Method | Signature | Description |
|---|---|---|
| Show | Show(title, description?) | Shows a default toast with optional description. |
| Show | Show(ToastOptions) | Shows a toast with full options including action button and duration. |
| Success | Success(title, description?) | Shows a success-styled toast. |
| Error | Error(title, description?) | Shows a destructive-styled error toast. |
| Promise | Promise(task, loading, success, error) | Shows loading state while the async task runs, then transitions to success or error. |
ToastProvider
| Property | Type | Default | Description |
|---|---|---|---|
| Position | ToastPosition | BottomRight | Viewport corner the toasts stack in. Values: TopLeft, TopRight, TopCenter, BottomLeft, BottomRight, BottomCenter. |
| DefaultDuration | int | 4000 | Default lifetime for toasts in milliseconds when Duration is not specified. |
| MaxToasts | int | 5 | Maximum number of toasts shown at once; older toasts are dismissed. |
ToastAction / ToastClose
| Property | Type | Default | Description |
|---|---|---|---|
| Label | string? | null | ToastAction — button text. |
| OnClick | EventCallback | — | ToastAction — invoked when the action button is clicked. |
| OnClose | EventCallback | — | ToastClose — invoked when the close button dismisses the toast. |