# Toast

Source: https://lumeo.nativ.sh/components/toast

# Toast

Displays a temporary notification popup message.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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.

Preview Code

Default Toast

Show Toast

Preview Code

Success Toast

Show Success

Preview Code

Destructive Toast

Show Error

Preview Code

All Variants

Default Success Error

Preview Code

Custom Messages

Saved Copy Link Delete Item

Preview Code

Toast with Actions

Show with Action

Preview Code

Persistent Toast

Show Persistent

Preview Code

Promise Toast

Save Changes

Preview Code

Variant — interactive

Pick a variant then show a toast to see it applied live.

DefaultSuccessDestructiveWarningInfo

Show Default toast

Preview Code

Position — interactive

Pick a position then click Show to see where the toast appears.

TopLeftTopCenterTopRightBottomLeftBottomCenterBottomRight

Show at BottomRight

**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.

## Related Components

-   [Alert](/components/alert) — Use for persistent, inline messages that stay visible on the page.
-   [Dialog](/components/dialog) — Use when a notification requires user acknowledgment or action.
-   [Progress](/components/progress) — Pair with toast for showing progress of long-running operations.