Toasts
Component Behavior
Alert the user to non-urgent status changes and optionally provide actions to take as a response to status changes. Ie, a toast that notifies the user that there are new changes to view with a button to view changes.
Opens small, dismissable dialogs typically on the bottom of the screen, though other locations are common. It is common practice for toasts to disappear after a set amount of time. If multiple toasts are activated, they stack one on top of the other with the newest toast on the bottom of the screen (or beginning of the order). Toasts with autoclose will pause their autoclose functionality when the toast is moused over or focused within.
Accessibility Guidelines
A toast should have role="alert". Note that for the screen reader to announce changes, role="alert" must be on a container that exists from pageload where the elements inside are changing; in this case, role="alert" would go on the div which is holding all the toasts (.toast-holder) so it can observe them opening and closing. Toast autoclose interval is set relatively short on this page for demonstration purposes, but should be configured to a time long enough for all users (including those using keyboard) to be able to interact with it. Strongly consider disabling autoclose for alerts that have action buttons.
Instructions
Copy HTML structure of toast-holder and place somewhere at the root level of your page, such as inside the body tag. Copy the structure of whichever toast style you'd like to use and set the id property to whatever you'd like. Call the openToast function with your toast id, a true/false value for using the autoclose functionality, and if you are using autoclose, the time in milliseconds you want it to stay open. Multiple toasts will automatically reflow within toast-holder.