Toast

The toast component renders toasts (sometimes known as “success messages”) to display short messages exclusively to confirm a completed user action (such as a form submission). Toasts inform users that an action happened if users cannot see the action on screen.

Toasts typically appear at the bottom of the screen.

Toasts must not be used in place of banners or alternate forms of notifications. You may use a toast to inform a user that a case has been created when the user is not being taken to that case. However, a toast is not appropriate to use for attaching files to a widget that is updating live on screen.

The content of the toast is controlled by the ToasterContext. Toasts can be designed to disappear after a given number of milliseconds by passing the dismissAfter prop. They are also dismissible by clicking the close icon. Toasts that time out must also store historic data within the application for easy user retrieval and to meet the WCAG success criteria of giving users enough time to take an action on timed content.