Great tutorial (with accompanying video) from Adam Argyle which starts with a useful definition of what a
Toast is and is not:
Toasts are non-interactive, passive, and asynchronous short messages for users. Generally they are used as an interface feedback pattern for informing the user about the results of an action. Toasts are unlike notifications, alerts and prompts because they're not interactive; they're not meant to be dismissed or persist. Notifications are for more important information, synchronous messaging that requires interaction, or system level messages (as opposed to page level). Toasts are more passive than other notice strategies.
There are lots of interesting ideas and considerations in Adam’s tutorial, such as:
- using the
<output>element for each toast
- some crafty use of CSS Grid and logical properties for layout
hsland percentages in custom properties to proportionately modify rather than redefine colours for dark mode
- animation using
- inserting an element before the
<body>element (TIL that this is a viable option)
Thanks for this, Adam!
(via Adam’s tweet)
There’s some nice code in here but the demo page minifies and obfuscates everything. However the toast component source is available on GitHub.
- A toast to accessible toasts by Scott O’Hara