Use a site alert for urgent public or servicewide information across every page; use banner for scoped interface-wide messages, notification banner for a before-H1 page-flow notice, and alert for urgent current-task status.
Use a site alert for urgent public or servicewide information across every page; use banner for scoped interface-wide messages, notification banner for a before-H1 page-flow notice, and alert for urgent current-task status.
Practice the judgment: Imagine this situation: Three stacked site alerts push navigation and the page heading below the viewport. 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 | Site alert | Banner | Notification banner | Alert |
|---|---|---|---|---|
| UI or UX | UI + UX - Urgent full-width sitewide alert near the top of every page | UI + UX - Top-of-interface broad-scope message | UI + UX - Page-flow service notification before the H1 | UI + UX - Urgent current-task status message |
| UI guidance | Render the site alert as a full-width message near the top of the site, before ordinary navigation or page content users might otherwise start from. | Render the banner at the top of the interface or content area it governs, below required global chrome and before the page content that should be interpreted with that message. | Render one notification banner in the page content column immediately before the page H1, using the same width as the surrounding service content. | 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. |
| UX guidance | Use a site alert when urgent public or servicewide information must be obvious and findable from any page, including deep links, refreshes, and routes outside the home page. | Use banners when users need broad context before continuing across several pages or sections, such as maintenance, service delay, account setup, rollout, policy, or official-site identity information. | Reserve the pattern for service-wide problems, personal deadlines or obligations elsewhere in the service, and outcomes from a previous page when the journey continues rather than ends. | 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. |
| Good UI | A public benefits site shows Emergency office closures at the very top of every page, with affected offices, updated time, and a link to alternate service channels. | A billing workspace shows Scheduled maintenance Saturday directly below the product header across all billing pages, with View schedule and Dismiss when safe. | A case-management page shows an Important notification banner immediately before Manage evidence, saying evidence upload may be delayed and linking to service status. | A session alert appears above the active editor, says the session expires in 2 minutes, and offers Save draft while keeping the editor usable. |
| Bad UI | Three large red alerts stack above the header, mixing closure, newsletter, and one form error. | Three unrelated banners stack above the page heading and push the account task below the fold. | A success toast appears in the corner after redirect and disappears before the user can verify which evidence was uploaded. | Users miss an urgent condition because the message auto-expires or appears far from the affected task. |
| Good UX | A user enters through a bookmarked application-status page and still sees the same closure alert before using the service. | A user moves from Overview to Invoices and still sees the same maintenance banner because the outage affects the whole billing workspace. | A user lands on Evidence overview and sees the upload confirmation before the page heading, then can continue the unfinished service journey. | When the connection returns, the alert downgrades to a success status and then can be dismissed safely. |
| Bad UX | Deep-linked users miss critical sitewide information because the alert exists only on the home page. | A field validation error appears in a banner, forcing users to hunt for the failing input. | The same upload confirmation remains on unrelated pages after the user has already reviewed the evidence record. | The only warning that unsaved work will be lost disappears after five seconds. |
| Best fit | Urgent public, safety, operating-status, outage, closure, or availability information applies to the whole site or service. | The message applies across several pages, routes, sections, records, or sessions. | A service problem, deadline, overdue action, or elsewhere-in-service event affects the user's next interpretation of the page. | A current task has a time-sensitive warning, error, or important status change. |
| Avoid when | The message applies only to one product workspace, account, section, page flow, field, row, or task. | The message affects only one field, object, row, panel, or local task section. | The message is a submitted-form validation error or field correction. | The message belongs beside one object, row, field, or local section. |
| Required state | Emergency site alert visible at the top of every affected page. | Informational product or service banner at the top of the related interface. | Neutral Important state for service problem, deadline, overdue action, or elsewhere-in-service information. | Advisory or success state that uses calmer status semantics rather than assertive alert semantics. |
| Accessibility burden | Give the site alert a descriptive aria-label or labelledby value so it appears clearly in landmark navigation. | Use a labelled region or landmark when the banner is persistent page content that users may want to navigate to. | Use a labelled region for neutral page-load notification banners so screen-reader users can navigate to the notice. | Use role alert for urgent dynamic text and avoid putting interactive controls inside the role-alert node itself. |
| Common misuse | Showing a sitewide emergency only on the home page. | Using a banner for one field error, one row warning, or one card status. | Using a notification banner for field validation errors instead of an error summary and field-level messages. | Using a disappearing toast for warnings users must act on before continuing. |