Canon Toasts

CANON · Toasts

A toast is cheap feedback for safe actions. It is not the answer to every UI question. Before reaching for a toast, ask whether an inline message, banner, or silence would serve better.

When to use a toast

Rule of thumb: toasts should never interrupt and never be required for the user to see. If users must see it, it's not a toast.

Toast vs banner vs inline vs modal

Wrong pattern picks waste attention. Offline? Banner, not toast. Form field error? Inline, not toast.

Duration

The timer pauses on hover and focus — critical for screen reader + motor-impaired users.

Material snackbar default is 4 seconds without action, 10 seconds with action. Modern practice trends shorter (4–6).

Position

Pick one position per app. Consistency matters.

Offset from edge: 16–24px. On mobile, account for safe-area-inset.

The Undo pattern

Undo toast is almost always better than "Are you sure?"

┌──────────────────────────────────────┐
│ 3 items moved to trash      [Undo]   │
└──────────────────────────────────────┘

• Do the action immediately.
• Show a toast with an Undo button.
• Duration: 5–7 seconds (long enough to catch misclicks).
• Undo reverses the action.
• Timer pauses on hover/focus.

This is dramatically faster than a confirmation modal for the 99% case, and catches the 1% misclick.

When Undo is not appropriate:

• Truly irreversible actions (account deletion, payment capture).
• Actions with side effects that can't be rolled back.

For those, use a confirmation modal (see canon-modals).

Stacking

• Max 3 toasts visible at once. Beyond that, collapse into a single "3 updates" toast.
• New toasts push old ones up (or down, depending on direction).
• Each toast has its own timer.
• Dismissing one doesn't affect others.

Accessibility — ARIA live regions

Toasts must be announced by screen readers, or they're invisible.

<div role="status" aria-live="polite" aria-atomic="true" class="toast">
  Message sent.
</div>

• role="status" for routine feedback.
• role="alert" for errors (more urgent, interrupts current SR reading).
• aria-live="polite" with status, aria-live="assertive" with alert.
• aria-atomic="true" so the whole message is announced, not just the change.
• The live region container should exist on page load, empty. Content is injected; don't mount/unmount the region itself.

Buttons inside the toast (Undo, Retry) are keyboard-focusable. Pressing Escape inside the toast moves focus back to the triggering element.

Structure

┌─────────────────────────────────────────┐
│ [icon] Message sent            [X]     │
│                                [Undo]  │
└─────────────────────────────────────────┘

• Optional icon (leading): success, warning, error, info.
• Message (body).
• Action button (trailing, when applicable): one max per toast.
• Close button (trailing): optional; if duration is short, close button adds clutter.

Size

Colors by intent

Follow canon-color semantic tokens:

Modern practice: dark-themed toasts by default (work on both light and dark themes), with colored accent via left border or icon.

Animation

Honor prefers-reduced-motion with fade-only.

Copy

• Present tense for completed actions: "Message sent" not "Message has been sent".
• Past tense acceptable if past is the natural voice: "File deleted".
• Specific > generic.
• Errors explain what + how to recover.

Anti-patterns

Decision tree

Is the feedback critical to user's next step?
  ├─ Yes → Inline or modal, not toast
  └─ No → Toast may be appropriate

Is it a persistent state (offline, locked, expired)?
  ├─ Yes → Banner
  └─ No → Continue

Is it reversible?
  ├─ Yes → Toast with Undo
  └─ No → Consider modal confirmation first

Is it an error requiring action?
  ├─ Yes → Inline error or modal
  └─ No → Toast with context ("Couldn't load — Retry")

Audit checklist

• Live region present (role="status" or role="alert")
• Timer pauses on hover and focus
• Duration between 3–7 seconds
• Max 3 toasts stacked at once
• One action max per toast
• Position is consistent across app
• Mobile accounts for safe-area-inset
• Animation honors prefers-reduced-motion
• Not used for form validation errors
• Not used for critical blocking info
• Undo provided for reversible destructive actions
• Error toasts name what failed + recovery

Sources

• WAI-ARIA Authoring Practices · Alert, Status, Live regions
• WCAG 2.2 · 2.2.1 Timing Adjustable, 2.2.3 No Timing, 4.1.3 Status Messages
• Material Design 3 · Snackbar (4s default, 10s with action)
• Apple HIG · Notifications (platform-native patterns)
• Reply (Gmail team research) · "Undo beats confirm"