Keep the work in focus.
Confirm a change, explain a problem, or offer a way back. Notifications let the task continue.
A local project, with a way back
Synthetic project · Changes stay in this page
Notifications appear here. Hover or focus pauses timed messages. Archive actions stay available until dismissed.
Give people time
Save confirmations can disappear after six seconds. Warnings, errors, and messages with an action stay until dismissed. Turn on the preference in the example to keep save confirmations too. Hover, keyboard focus, and an inactive tab pause the timer.
Queue without crowding
Three notifications are visible at once. Queued messages start their timer when they become visible. An explicit ID updates the same notification, which keeps progress and completion together.
Announce, without moving focus
New messages are announced politely. Reserve assertive announcements for urgent information. Review notifications moves focus only when requested; Escape works while focus is inside the notification area.
Inline or beside the workspace
This example stays in the page so you can inspect it. The default viewport sits at the bottom end of the screen, respects text direction, and keeps the same anatomy. Put actionable modal notifications inside their modal so the controls remain available.
Accessibility references: W3C alert guidance, status messages, and adjustable timing.