Design Pattern

Toast Notification

A toast notification is a lightweight UI pattern that returns short feedback without interrupting the user's task. In addition to visual placement and dismissal timing, it needs thoughtful use of aria-live and roles.

Difficulty: Intermediate Category: Feedback

When to use / not use

Use it when

  • When you want to briefly confirm a successful action, such as save or copy
  • When you want to announce the completion of a background task without opening a modal
  • When you want to give feedback without stopping the user's current work

Don't use it when

  • For important errors that require acknowledgement → use a dialog
  • For information that should stay visible → use a banner or alert
  • For form validation errors → show them inline near the field

Anatomy

1 Toast container (fixed-position area)
2 Toast body (individual notification card)
3 Icon (visually hints the type)
4 Message text
5 Close button or progress bar (optional)
  1. Container — A fixed area that stacks multiple toasts
  2. Toast body — A notification card with role="status" or role="alert"
  3. Icon — Supports the message type, such as success, warning, or error
  4. Message — A short and specific piece of feedback text
  5. Supporting elements — Close buttons or progress indicators can show remaining time or allow dismissal

HTML Structure

Key points

  • Use role="status" for non-urgent messages and role="alert" for urgent ones
  • Structure the toast so it functions as a live region
  • If you provide a close button, give it a clear accessible label
  • The structure should remain readable by assistive technology even when toasts are injected dynamically with JavaScript

CSS Implementation

Placement and animation

  • Fix the container to an edge of the viewport and keep stack order consistent
  • Use opacity and transform for natural entry and exit animation
  • If you use color by notification type, reinforce it with icons or wording
  • If you add a progress bar, make sure it helps users understand the remaining display time

Accessibility

WCAG 4.1.3 Status Messages

To communicate changes without moving focus, the live-region role and structure matter.

WCAG 2.2.1 Timing Adjustable

If the toast auto-dismisses, it needs a long enough display time, and important content may need to persist.

WCAG 1.4.1 Use of Color

Do not rely on color alone to convey the type. Pair it with icons or text.

Interaction guidelines

  • A toast should not block the user's task
  • If it has a close button, that button should be keyboard focusable
  • Consider pausing auto-dismiss on hover to give people time to finish reading

Live Demo

Success toast

A basic non-modal success notification.

PreviewFullscreen

Style variations

An example that distinguishes success, warning, error, and information.

PreviewFullscreen

Auto-dismiss with progress bar

A stacked toast example that also shows remaining time.

PreviewFullscreen

Common mistakes

Using role="alert" for non-urgent messages

That forces a strong interruption in screen readers and is excessive for ordinary success feedback.

Display time is too short

If the toast disappears before people can read it, it stops functioning as a useful notification.

Not announced to screen readers

Without the right aria-live or role design, the message may be visible but still not conveyed to assistive technology.

Distinguishing types by color alone

Given color-vision diversity, shape, iconography, and wording should provide additional cues.