# 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: 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:

```
GET https://ebay.gitbook.io/mindpatterns/messaging/toast-dialog.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.