Alert / Toast
A notification component that delivers important messages without interrupting user tasks
Related WCAG criteria — click to view details
Code example
Common baseline
Applies to all design systemsSpecify role="alert" or role="status"
Use role="alert" for urgent notifications (aria-live="assertive") and role="status" for non-urgent ones.
Do not move keyboard focus to alert
Alerts should never steal keyboard focus from the user's current position.
Provide a dismiss button
Users must be able to dismiss persistent alerts using a keyboard-accessible button.
Sufficient display time
Auto-hiding alerts must remain visible long enough to be read (minimum 5 seconds recommended).
Use icons and color for severity
Distinguish alert severity (info/warning/error/success) with both icons and color, not color alone.
Pause auto-hide on focus/hover
Pause the auto-hide timer when the alert is focused or hovered.
Manage stacked alerts
When multiple alerts are queued, manage them to avoid overwhelming users.
Do not auto-hide too quickly
An alert that disappears in under 3–4 seconds may not be noticed by all users.
Do not use color alone to convey severity
Color alone is not sufficient; always include a text label or icon for severity.
Do not pre-render alerts on page load
Alerts already in the DOM on load will not be announced by screen readers via aria-live.
Additional checks
Snackbar + Alert combination
When using Snackbar, set autoHideDuration to at least 5000ms to give users enough time to read the message.
Set minimum autoHideDuration
Ensure autoHideDuration is at least 5000ms so users have sufficient time to read the alert.
Code sample
Implementation notes
- –MUI Alert used standalone automatically receives role="alert".
- –Snackbar onClose responds to Escape key and outside clicks.
- –The severity prop (success/info/warning/error) automatically applies icons and colors.