Component 20 · Complete

Toast

Announces brief outcomes through a bounded queue, semantic priority, optional actions, and interaction-aware timing.

Default

Confirm an outcome without interruption

Toast appears at the viewport edge without moving focus. Hover or keyboard interaction pauses its timer.

Semantic tones

Match announcement priority to impact

Neutral, info, and success are polite. Warning and danger use assertive announcement semantics.

Optional action

Offer one clear next step

An action dismisses its Toast after selection. Use a persistent duration when the action is important.

Queue

Bound the visible stack

The demo shows up to three messages. Additional messages wait in insertion order and appear as visible Toasts leave.

Lifecycle

Keep application effects explicit

The manager owns presentation and timing. Application code owns the action callback and any resulting product state.

CreatecreateToastManager(region)
Notifymanager.show(options)
Removemanager.destroy()

Usage guidance

Reserve Toast for brief outcomes.

Keep validation errors beside their fields and confirmation before destructive actions. Use Toast after the operation completes.

Next component: Header and Navigation