USER INTERFACE

Toasts

Short, non-blocking messages about what just happened. Every button on this page fires a real one.
THEME
DENSITY
01

Playground

Type, position, style, duration and options
✓ Invoice sent×1AV-2026-042 is on its way to Lena.
Toasts appear bottom right of the window.
toast.success("Invoice sent", { description: "AV-2026-042 is on its way to Lena.", action: { label: 'View', onClick }, duration: 5000 }) <Toaster position="bottom-right" variant="dark" max={3} pauseOnHover swipeToDismiss />
Settings
TYPE
POSITION
STYLE
DURATION
02

Types & content

Six toasts used across Avava
Simplesuccess · 4 s
✓ Invoice sent×1
Confirmations
With descriptiontitle + line
✓ Invoice sent×1AV-2026-042 to Lena · we’ll tell you when it’s opened.
When the “what” needs a “where”
Undoaction + countdown
• Project archived×1Packaging · Mira Optics
Reversible actions
From a personavatar · Reply
Lena commented on Hero 04×1“More blue in the shadows?”
Comments, mentions
With previewthumbnails · Open
✓ 3 photos uploaded×1Spring 27 / Selects
Uploads, exports
Loading → resultsame toast updates
Exporting 42 photos…×1Resizing & watermarking
Jobs under ~10 s
03

Stack & queue

Limits, collapsing and merging
Queue · max 3Fire five at once: three show, the rest wait and slide in as others leave. The counter shows what’s waiting.
Collapsed stackToasts tuck behind each other; hover or focus the stack to fan them out.
Merge duplicatesSame event again while the toast is visible? Bump a counter instead of stacking copies.
Click it several times quickly.
04

Behaviour

Pause, swipe, persistence, errors and offline
⏸Pause on hover & focus
Hover a toast (or tab into it) and the timer bar stops — people can finish reading.
⇢Swipe to dismiss
Drag a toast sideways past 90 px to throw it away. Works with mouse and touch.
⚠Important stays
Payment errors don’t time out. They wait for Retry or ✕ and use role="alert".
⌁Offline
Losing the connection pins a toast; coming back replaces it with a short success.
↪Survives navigation
The toaster lives above the router — change pages below and the toast stays.
FAKE APPavava.studio/Projects
You are on Projects. Toasts above don’t care — they live outside the page.
05

Rules & a11y

Markup, checklist and what to use instead
Markup
<section aria-label="Notifications" class="toaster">
  <!-- regular: polite -->
  <div role="status" aria-live="polite">
    Invoice sent <button>View</button>
  </div>
  <!-- errors: assertive, no auto-dismiss -->
  <div role="alert">
    Payment failed <button>Retry</button>
  </div>
</section>
Checklist7 of 8 checked
TOASTSomething happened; nothing is required. Optional action.Saved, sent, uploaded
ALERTA state the page is in, that stays until fixed.Overdue invoice banner
MODALThe user must decide before continuing.Delete project?
NOTHINGThe change is visible right where they clicked.Toggle a checkbox
DO✓Write what happened, in the past tense — “Invoice sent”✓Offer one action at most, ideally Undo or View✓Keep errors on screen until handled✓Merge repeats into a counter✓Put the toaster above the router
DON’T✕Toast every click — show the result in place instead✕Steal focus or block the page✕Use toasts for things people must read later✕Stack more than three✕Auto-dismiss anything with a decision in it