Toast
A lightweight auto-dismissing notification component
Related WCAG criteria — click to view details
Code example
Common baseline
Applies to all design systemsSet appropriate role
Use role="status" (aria-live="polite") for non-urgent notifications and role="alert" (aria-live="assertive") for urgent errors or warnings.
Do not steal keyboard focus
Toast must not interrupt the current task. Do not move the user's focus when the toast appears.
Sufficient display time
Auto-dismissing toasts must be visible for at least 5 seconds, and users must be able to extend or make them persistent. This is a WCAG 2.2.3 requirement.
Keyboard-accessible close button
If a close button is present, it must be keyboard accessible and activatable, with aria-label to describe the close action.
Pause timer on hover/focus
The auto-dismiss timer must pause when the user hovers over or focuses on the toast.
Use icons in addition to color for type distinction
Do not distinguish success/error/warning/info by color alone. Provide icons and text labels alongside color.
Limit simultaneous toast count
Multiple stacked toasts can overload screen readers. Limit the maximum count and auto-remove the oldest first.
Do not use toast as the sole channel for important information
Users may miss toasts. Deliver important errors or confirmations via alert-dialog or inline messages instead.
Auto-dismiss under 3 seconds
This is a WCAG 2.2.3 failure. Low-vision and screen reader users do not have enough time to read the message.
Complex forms/buttons inside toast
Toast is for simple notifications and undo actions. Use a dialog or inline message for complex interactions.
Conveying severity by color alone
Relying on red=error by color alone makes the meaning unrecognizable to users with color vision deficiencies.
Additional checks
autoHideDuration must be 5000ms or more
Set autoHideDuration to at least 5000ms for WCAG 2.2.3 compliance.
Provide a close button via the action prop
Add a close button to the Snackbar action prop so keyboard users can dismiss it directly.
Set severity when combining with Alert
Using Alert inside Snackbar automatically applies type-appropriate icons and colors based on the severity prop.
Code sample
Implementation notes
- –MUI Snackbar uses role="presentation", while the inner Alert provides role="alert".
- –autoHideDuration controls the auto-dismiss time. WCAG 2.2.3 recommends 5000ms or more.
- –The Alert severity prop (success, error, warning, info) automatically applies type-appropriate icons and colors.
- –Excluding "clickaway" from onClose reason prevents unintentional dismissal.