You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
There is no built in way to toast notifications in HTML. <TypeLinklinks={docs.links}type={docs.exports.useToastRegion} /> and <TypeLinklinks={docs.links}type={docs.exports.useToast} /> help achieve accessible toasts that can be styled as needed.
48
+
There is no built in way to display toast notifications in HTML. <TypeLinklinks={docs.links}type={docs.exports.useToastRegion} /> and <TypeLinklinks={docs.links}type={docs.exports.useToast} /> help achieve accessible toasts that can be styled as needed.
49
49
50
50
***Accessible** – Toasts follow the [ARIA alertdialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/). They are rendered in a [landmark region](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/), which keyboard and screen reader users can easily jump to when an alert is announced.
51
51
***Focus management** – When a toast unmounts, focus is moved to the next toast if any. Otherwise, focus is restored to where it was before navigating to the toast region.
Copy file name to clipboardExpand all lines: packages/react-aria-components/docs/Toast.mdx
+1-26Lines changed: 1 addition & 26 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -174,11 +174,10 @@ Then, you can trigger a toast from anywhere using the exported `queue`.
174
174
175
175
## Features
176
176
177
-
There is no built in way to toast notifications in HTML. `<ToastRegion>` and `<Toast>` help achieve accessible toasts that can be styled as needed.
177
+
There is no built in way to display toast notifications in HTML. `<ToastRegion>` and `<Toast>` help achieve accessible toasts that can be styled as needed.
178
178
179
179
***Accessible** – Toasts follow the [ARIA alertdialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/). They are rendered in a [landmark region](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/), which keyboard and screen reader users can easily jump to when an alert is announced.
180
180
***Focus management** – When a toast unmounts, focus is moved to the next toast if any. Otherwise, focus is restored to where it was before navigating to the toast region.
181
-
***Priority queue** – Toasts are displayed according to a priority queue, displaying a configurable number of toasts at a time.
Toasts are displayed according to a priority queue. The priority of a toast can be set using the `priority` option, passed to the `queue.add` function. Priorities are arbitrary numbers defined by your implementation.
<ButtononPress={() =>queue.add({title: 'Toast is done!'}, {priority: 2})}>
220
-
{/*- end highlight -*/}
221
-
Show medium priority toast
222
-
</Button>
223
-
{/*- begin highlight -*/}
224
-
<ButtononPress={() =>queue.add({title: 'Toast is burned!'}, {priority: 3})}>
225
-
{/*- end highlight -*/}
226
-
Show high priority toast
227
-
</Button>
228
-
</div>
229
-
```
230
-
231
206
## Auto-dismiss
232
207
233
208
Toasts support a `timeout` option to automatically hide them after a certain amount of time. For accessibility, toasts should have a minimum timeout of 5 seconds to give users enough time to read them. If a toast includes action buttons or other interactive elements it should not auto dismiss. In addition, timers will automatically pause when the user focuses or hovers over a toast.
0 commit comments