Toast

Toast confirms that something happened, away from where it happened. Decide whether the person needs the message after they have moved on — if not, say it inline instead and spare the interruption.

Examples

When to use

Use Toast for a brief, non-blocking confirmation of something the person just did, when they do not need to act on it.

Reach for something else when:

• The message is about content on the page — use Alert, which stays next to it.
• Something needs a decision before continuing — use Dialog. A toast can be missed entirely.
• The message carries information someone will need later — a toast that leaves takes it with it.

Accessibility

• Standalone React Toast uses role="status". Inside ToastStack it has no individual role; the persistent region owns announcements. ToastProvider separates polite info/success from assertive danger. Never put the only copy of important information in a toast.
• ToastStack is position: fixed at the bottom-right of the viewport. It sits over whatever is there, so keep toasts short and few.
• The close button appears only with onClose. Its accessible name defaults to the English string "Close notification"; pass closeLabel to translate it for a localized product.
• tone colors the icon only. The words must say whether something succeeded or failed.

Timing and dismissal

This policy applies to the coordinated Styles 1.2.0, React 2.0.0, and Alpine 2.0.0 versions. Use the Styles companion for the CSS focus fallback; see the shared compatibility and migration record for the tested tuple and migration guidance.

React ToastProvider and the Alpine toast store resolve duration when a notification is queued: per-toast duration overrides explicit provider/store configuration, which overrides the implicit tone policy. Info and success default to 8000 ms; danger, including error(), defaults to persistent. 0 always means persistent. Explicit global 8000 also makes danger expire. Changing configuration affects new notifications only.

Pointer hover and focus inside a row independently pause its remaining time. The countdown resumes only after both leave; moving between descendants does not restart it. Give action-bearing React messages an explicit { duration: 0 }; the provider does not inspect their content.

Dismissing a focused row returns focus to its enqueue-time opener if that element is still eligible. Removed, disabled, hidden or inert openers, and openers inside a toast stack, use the same persistent stack instead. This named region (a landmark) remains focusable and visibly outlined even when empty. Unfocused dismissals do not move focus, and deliberate action focus moves are preserved. The region adds no live announcement; polite and assertive regions announce additions only.

Migration: set duration={4000} on React ToastProvider or assign Alpine.store('lyraToasts').duration = 4000 to restore the previous default delay for all tones. Per-toast overrides still take precedence. These timing changes apply to React and Alpine; the imported Blade API below is unchanged.

API and code

<div class="lyra-toast-stack">
  <div class="lyra-toast" role="status">
    <span class="lyra-toast__icon lyra-toast__icon--success"></span>
    <span>Project archived</span>
    <button class="lyra-toast__close" type="button" aria-label="Close notification">×</button>
  </div>
</div>

<lyra:toast tone="success">Project settings saved.</lyra:toast>