Behavior comparison
Choose Banner for: Announcing scheduled maintenance affecting the page. Choose Toast for: Confirming a low-risk background result.
| Dimension | BannerBanner | ToastToast |
|---|---|---|
| Trigger | A page-wide or product-wide condition makes the announcement relevant. | A system event or completed user action creates the message; users do not open it as a destination. |
| Modality | Non-modal, persistent region; the rest of the page remains operable. | Non-modal, transient status message that does not take focus. |
| Placement | Spans the top of the page or application content in document flow. | Overlays a viewport edge without moving the page layout. |
| Interactivity | May contain one high-level action or dismissal without becoming a task surface. | May offer one limited undo or dismiss action; never holds an essential decision. |
| Focus | The banner appears before main content without stealing focus; links receive the same visible focus as the rest of the page. | The toast never steals focus on arrival; an optional action becomes reachable without disrupting the current task. |
| Dismissal | A close control exists only for noncritical notices, and dismissal persistence expires when the message changes materially. | It expires after sufficient time, pauses for interaction, and can be dismissed explicitly without requiring action. |
| Accessible role | named section or aside, not the site header banner role | status for polite success updates |
| Use case | Announcing scheduled maintenance affecting the page | Confirming a low-risk background result |
| Mobile behavior | Allow text and actions to wrap without covering navigation or the first content heading. | Stay clear of system chrome, safe areas, and the keyboard; keep copy and actions brief. |