> For the complete documentation index, see [llms.txt](https://ebay.gitbook.io/mindpatterns/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ebay.gitbook.io/mindpatterns/messaging/toast-dialog.md). # Toast Dialog ![Toast dialog on small screen.](/files/-MJibabBxJBz0rEj6Iue) ![Toast dialog on large screen.](/files/-MJibhiZsl9UIlEuVTUa) ### Introduction A toast dialog is a non-modal, non-intrusive dialog containing a system level notification for the user. ### Best Practices A toast dialog is non-modal and should **not** steal or trap keyboard focus. When the dialog becomes visible, it **must** be placed immediately after the current active element in the DOM. This ensures a logical reading and tabbing order in the page. ### Working Examples Experience the pattern in action on our companion [eBay MIND patterns examples website](https://ebay.github.io/mindpatterns/messaging/toast-dialog/index.html). Examine the required markup structure in the [Bones GitHub project](https://github.com/ianmcburnie/bones#user-content-toast-dialog). View a fully styled example on our [eBay Skin website](https://opensource.ebay.com/skin/component/toast-dialog/). ### Terminology This section is not yet available. ### Interaction Design This section provides interaction design for keyboard, screen reader and pointing devices. #### Keyboard A toast dialog is non-modal and should **not** steal or trap keyboard focus. The toast should be positioned in the dom so that the next **TAB** key press moves focus from the currently focussed element into the toast dialog element. #### Screen Reader A toast dialog is non-modal and should **not** steal or trap screen reader virtual cursor. The toast should be positioned in the dom so that the virtual cursor moves from the currently focussed element onto the toast dialog element. The screen reader should announce the title and contents of the toast dialog. #### Mouse This section is not yet available. ### Developer Guide This section is not yet available. ### ARIA Reference This section gives an overview of ARIA usage within the context of this pattern. #### role=dialog Informs the assistive technology that the user is inside of a dialog. #### aria-modal=false Informs assistive technology that the dialog is not modal. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://ebay.gitbook.io/mindpatterns/messaging/toast-dialog.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.