├── README.md ├── security-privacy-self-review.md └── study-group ├── Library-Demos.md ├── README.md ├── Toast-Implementation-Studies.md ├── Visual-Study.md └── images ├── android-snackbar-demo.gif ├── android-snackbar-design.png ├── android-toast-design.png ├── blueprint-demo.gif ├── blueprint-design.png ├── bootstrap-design.png ├── ionic-demo.gif ├── ionic-toast-design.png ├── material-ui-snackbar-demo.gif ├── material-ui-snackbar-design.png ├── ngx-toastr-demo.gif ├── ngx-toastr-design.png ├── notyf-demo.gif ├── notyf-design.png ├── polymer-design.png ├── polymer-paper-toast-demo.gif ├── react-toastify-demo.gif ├── react-toastify-design.png ├── salesforce-design.png ├── salesforce-error-design.png ├── salesforce-success-design.png ├── salesforce-warning-design.png ├── sweet-alert2-demo.gif └── sweet-alert2-design.png /README.md: -------------------------------------------------------------------------------- 1 | # A Standard 'Toast' UI Element 2 | 3 | # Introduction 4 | 5 | This document proposes a new HTML element for a "toast" pop-up notification. 6 | It is provided as a [built-in module](https://github.com/tc39/proposal-javascript-standard-library/). 7 | 8 | This proposal is intended to incubate in the WICG once it gets interest on 9 | [its Discourse thread](https://discourse.wicg.io/t/proposal-toast-ui-element/3634). 10 | After incubation, if it gains multi-implementer interest, 11 | it will graduate to the [HTML Standard](https://html.spec.whatwg.org/multipage/) as a new standard HTML element. 12 | 13 | ## What is a "toast" pop-up notification? 14 | 15 | > "Toasts are pretty common in UX design; refers to popup notifications which typically appear at the bottom of the screen (like a piece of toast in a toaster)." 16 | 17 | — [Kyle Decker](https://twitter.com/kybradeck/status/1139006173762531328) 18 | 19 | Sneha Munot provides a nice definition in her [uxplanet.org article](https://uxplanet.org/toast-notification-or-dialog-box-ae32ad53106d), 20 | where she compares toasts to dialog boxes. 21 | 22 | > [A toast] is a small message that shows up in a box at the bottom of the screen and disappears on its own after few seconds. 23 | > It is a simple feedback about an operation in which current activity remains visible and interactive. 24 | > It basically is to inform the user of something that is not critical and that does not require specific attention and does not prevent the user from using the app device. 25 | > 26 | > For example; on gmail when a mail is send you receive a feedback of “Sending message…” written in the form of toast message. 27 | 28 | Another concise definition is found in Ben Brocka's [ux.stackexchange.com response](https://ux.stackexchange.com/a/12000): 29 | 30 | > A Toast is a non modal, unobtrusive window element used to display brief, auto-expiring windows of information to a user. 31 | 32 | This adds which adds the distinguishing detail of a toast being **auto-expiring**. 33 | 34 | In the absence of browser-intrinsic toasts, 35 | the current state of affairs is that many libraries and design systems include toast features. 36 | This repository contains a [study group](https://github.com/jackbsteinberg/std-toast/tree/master/study-group) which surveys and compares toast implementations across the web and other platforms. 37 | 38 | Below is an animated image displaying some typical toast behaviors, 39 | drawn from the [Blueprint](https://blueprintjs.com/docs/#core/components/toast) design component library. 40 | The study group contains [a variety of such examples](study-group/Library-Demos.md). 41 | 42 | ![An animated demo showing several toasts in action, including close buttons, action buttons like "Retry", and multiple toasts stacking on top of, or replacing each other](study-group/images/blueprint-demo.gif) 43 | 44 | 45 | ## Why? 46 | 47 | Modern web applications allow users to complete many actions per page, 48 | which necessitates providing clear feedback for each action. 49 | Toast notifications are commonly used to unobtrusively provide this feedback. 50 | 51 | Many libraries in a variety of frameworks implement a version of toast 52 | (see [research](./study-group/)), 53 | but the web has no built-in API to address the use case. 54 | By providing a toast API as part of the web platform's standard library, 55 | the web becomes more competitive with other app development platforms, 56 | and web application developers can spend less of their time and bytes 57 | on implementing this pattern. 58 | 59 | Toasts are also a deceptively-tricky pattern to get right. 60 | They require special accessibility considerations, 61 | and scenarios involving multiple toasts need special handling. 62 | [Not all libraries account for these subtleties](./study-group/). 63 | By providing a built-in toast control that fully handles these aspects, 64 | we can level up the typical toast experience for both developers and users of the web. 65 | 66 | Finally, 67 | the ecosystem can benefit from a shared understanding of how to create and style toasts. 68 | If the platform provides a toast, 69 | then all libraries and components can freely use toasts to communicate to their users. 70 | Whereas, 71 | if toasts can only be found in libraries, 72 | then importing a toast-using component also means importing their opinion on what the best toast library is. 73 | In the worst case, 74 | this can lead to multiple uncoordinated toast libraries acting on a single page, 75 | each of which needs its own styling and tweaks to fit in to the application. 76 | If instead libraries and components all use the standard toast, 77 | the application developer can centrally style and coordinate them. 78 | 79 | 80 | ## Sample code 81 | 82 | The standard toast can be used according to two different patterns. 83 | 84 | The first defines a `` HTML element, 85 | then shows it with configurations via a method on the element. 86 | This can be used to declaratively predefine toasts the application will need, 87 | and then show them inside the application logic. 88 | 89 | ```html 90 | 93 | 94 | 95 | Email sent! 96 | 97 | ``` 98 | 99 | ```js 100 | document.querySelector('#sample-toast').show({ 101 | duration: 3000 102 | }); 103 | ``` 104 | 105 | The second imports the `showToast()` function from the `"std:elements/toast"` module, 106 | which takes in a message and some configurations and creates and shows a toast in the DOM. 107 | This is more convenient for one-off toasts, 108 | or for JavaScript-driven situations, 109 | similar to how the `alert()` function can be used show alerts. 110 | 111 | ```js 112 | import { showToast } from 'std:elements/toast'; 113 | 114 | const toast = showToast("Email sent!", { 115 | type: "success", 116 | duration: 3000 117 | }); 118 | ``` 119 | 120 | ## Goals 121 | 122 | Across popular toast implementations there are recurring patterns, 123 | which the standard toast aims to accomplish natively. 124 | 125 | - The component will be accessible by default; 126 | native accessibility is a strong priority for toasts, 127 | as they can be difficult to make properly accessible. 128 | 129 | - Toast implementations are often shaped similarly, 130 | and a goal of the standard toast is to make it as easy as possible for developers 131 | to build and style toasts that conform to those common shapes. 132 | 133 | - The positioning of the toast must be intuitive, 134 | so the standard toast will come with built-in support for common positions, 135 | as well as a sensible default. 136 | 137 | - To balance ease of use with customization, 138 | the standard toast will support creating and showing with one JavaScript function, 139 | as well as writing a custom view with a `` element 140 | and showing that with a method. 141 | 142 | - The standard toast will come with support for showing multiple toasts, 143 | either by stacking them in the view, 144 | or queueing them and displaying sequentially. 145 | 146 | The standard toast API hopes to provide a base for more opinionated or featureful toast libraries to layer on top of. 147 | It will be designed and built highly extensible, 148 | so library implementations can focus on providing more specific styling, better framework support, or more opinionated defaults. 149 | The intent is that any developer looking to use a toast in their work will use a standard toast, 150 | or a library which provides a wrapper on top of standard toast. 151 | 152 | TODO([#14](https://github.com/jackbsteinberg/std-toast/issues/14)): create an example of this layering and link to it here. 153 | 154 | ## Proposed API 155 | 156 | The element is provided as a [built-in module](https://github.com/tc39/proposal-javascript-standard-library/blob/master/README.md), 157 | named `"std:elements/toast"`. 158 | See [whatwg/html#4697](https://github.com/whatwg/html/issues/4697) for more discussion on "pay-for-what-you-use" elements available via module imports. 159 | 160 | ### The `` element 161 | 162 | #### Behavior 163 | 164 | The `` element provides a subtle, non-interruptive notification to the user. 165 | The toast will appear at a customized time and position on the screen, 166 | and will typically contain a message and optionally action and dismiss buttons 167 | (though arbitrary markup in the element is supported). 168 | The contents will be announced to a screen reader 169 | (politely or assertively depending on `type` [see [attributes](#attributes)]), 170 | and after a certain duration, the toast will timeout and hide itself 171 | (though this timeout will be suspended while the toast has focus or the mouse is hovering on it). 172 | 173 | TODO([#18](https://github.com/jackbsteinberg/std-toast/issues/18), 174 | [#29](https://github.com/jackbsteinberg/std-toast/issues/29)): 175 | determine properly accessible behavior, 176 | specifically w.r.t. actions and navigation to / from the toast. 177 | 178 | #### Attributes 179 | 180 | - [Global attributes](https://html.spec.whatwg.org/multipage/dom.html#global-attributes) 181 | - `open`: a boolean attribute, determining whether the toast is visible or not (according to the default styles). 182 | By default toasts are not shown. 183 | - `type`: an [enumerated attribute](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#enumerated-attribute) indicating whether the toast is of a special type: 184 | one of `"success"`, `"warning"`, or `"error"`. 185 | This is used to convey special [semantics](https://html.spec.whatwg.org/multipage/dom.html#represents) for the toast, 186 | similar to the distinctions between e.g. `
    ` / `