Use a notification center for durable, user-opened notification history and actions; use toast for brief transient feedback, alert for urgent current-task status, and inline message for object-local context.
Use a notification center for durable, user-opened notification history and actions; use toast for brief transient feedback, alert for urgent current-task status, and inline message for object-local context.
Practice the judgment: Imagine this situation: A critical session-expiry warning is hidden only inside the notification center and the user loses work. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Notification center | Toast notification | Alert | Inline message |
|---|---|---|---|---|
| UI or UX | UI + UX - Durable user-opened notification history and action drawer | UI + UX - Transient non-modal status message | UI + UX - Urgent current-task status message | UI + UX - Contextual in-flow feedback |
| UI guidance | Provide a persistent notification entry point, usually a bell or inbox control, with a count that represents new unseen notifications rather than every unread item forever. | Render toast notifications in a consistent non-modal region with short status text, clear severity, an optional close control, and at most one concise action. | Render an alert as a visible message in the current task area with a clear severity cue, short title, consequence-focused body, and one direct action or safe dismissal when appropriate. | Render the message inside the same row, card, panel, form section, or task region that it describes, with a clear tone, concise title, body text, and at most one local action or detail disclosure. |
| UX guidance | Use a notification center when users receive enough asynchronous system or collaboration updates that they need a durable place to review, triage, and act later. | Escalate to inline, section, dialog, notification center, undo, or error-state treatment when the message requires repair, proof, long reading time, several actions, or reliable recovery. | Use alerts when the user must notice a time-sensitive condition that affects their current task, such as session expiry, lost connection, unsaved work risk, failed submission, or a security-sensitive hold. | Use inline messages when users need contextual feedback while continuing nearby work, such as a row-level warning, section-level success, local policy note, or task-specific next step. |
| Good UI | A bell opens a drawer with Unread and All filters, showing comment mentions, approval requests, export results, and background-job failures in newest-first order. | Export started appears in the top notification region with a timestamp, close control, and View jobs action that remains available in activity history. | A session alert appears above the active editor, says the session expires in 2 minutes, and offers Save draft while keeping the editor usable. | An invoice row shows Missing billing contact directly beneath the affected customer with Add contact as the only action. |
| Bad UI | Users ignore the center because duplicate low-value messages inflate the badge. | Five unrelated toasts pile up over the Save and Continue controls. | Users miss an urgent condition because the message auto-expires or appears far from the affected task. | A section message contains a full support workflow, several links, and unrelated settings controls. |
| Good UX | Opening the notification drawer clears the new-notification badge while unread items remain available for later triage. | A completed archive action shows a short toast and a specific Undo action because the prior state can be restored. | When the connection returns, the alert downgrades to a success status and then can be dismissed safely. | A successful send message remains beside the invoice long enough to copy the generated reference. |
| Bad UX | Users mark all notifications read and lose the only record of an export job they still need to download. | Every autosave tick triggers a toast, training users to ignore real status changes. | The only warning that unsaved work will be lost disappears after five seconds. | The message disappears like a toast even though users still need the invoice reference. |
| Best fit | Users receive multiple asynchronous updates across objects, jobs, collaborators, approvals, or reminders. | Use for short non-blocking confirmation after explicit actions such as save, copy, send, archive, invite, or queue export. | A current task has a time-sensitive warning, error, or important status change. | A visible object or section has local status, warning, success, or next-step information. |
| Avoid when | The product has only occasional current-action feedback that a toast or inline status can handle. | The message is the only recovery path for a blocking or high-consequence failure. | The message belongs beside one object, row, field, or local section. | The message is a one-field validation correction. |
| Required state | Closed entry-point state with zero, new-unseen, and unread-but-seen counts. | Stacked state with newest and older messages ordered predictably and capped. | Advisory or success state that uses calmer status semantics rather than assertive alert semantics. | Informational inline message attached to the relevant object or section. |
| Accessibility burden | Announce new notification arrival with status semantics when appropriate, but avoid interrupting users repeatedly for low-priority center items. | Keep close and action controls keyboard reachable, clearly named, and stable while focused. | Use role alert for urgent dynamic text and avoid putting interactive controls inside the role-alert node itself. | Keep the message in the reading order near the context it describes. |
| Common misuse | Treating the badge count, unread count, and total notification count as one number. | Using a toast as the only feedback for payment, save, permission, upload, or security failures. | Using a disappearing toast for warnings users must act on before continuing. | Using an inline message for a single field error that should be connected to that input. |