Component Proposal: Toast

[brandonlenz]

Component Overview

USWDS currently does not offer a toast (or similar) component for displaying brief messages to users.

Using alerts are not always convenient as they often push content around on the page if shown/hidden dynamically, which makes them intrusive.

Describe the solution you'd like

Evaluate the need for a Toast, accessibility concerns and best practices, etc, and implement a suitable component

Describe alternatives you've considered

If there are better evaluated alternatives to achieve similar effect, document and close this issue

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct.
• I checked the current issues for duplicate feature requests.

[amycole501]

This request has received a number of votes (note that it was converted from an issue earlier this year).

We'd like to know more about the use cases for a toast component. Is the request coming from a place of needing an option to an alert or error message? Do the toast alerts need to disappear automatically or be dismissed by the user? Live examples would be great so we can best follow up on this request. We also want as many contributions as possible by a wide range of teams. Knowing more will allow us to provide an informed recommendation.

[jbouder]

There is definitely a need from my end. To me the main differences between an Alert and a Toast are:

• A toast appears temporarily, an Alert usually persists
• A toast "floats" above the UI, where as an Alert is usually inline

In terms of specs, I like the UX of the AntD Notifications: https://3x.ant.design/components/notification/.

I would expect the following from a Toast:

• Should appear temporarily by default, but should be configurable
• Should float above the UI
• Should appear in the top right by default, but should be configurable
• Should allow different types of Toasts, aligning with USWDS alerts types makes sense to me
• Should stack Toasts if more than 1 is displayed at a time