Toast alpha
A ToastContainer renders the queued toasts in an application. It should be placed at the root of the app.
placement
Placement of the toast container on the page.
placement
Actions
Use the actionLabel
and onAction
options to add an action button to the toast. Set shouldCloseOnAction
to true to close the toast when the user presses the button.
import {Button, UNSTABLE_ToastQueue as ToastQueue} from '@react-spectrum/s2';
<Button
onPress={() => ToastQueue.info('An update is available', {
actionLabel: 'Update',
onAction: () => alert('Updating!'),
shouldCloseOnAction: true
})}>
Show actionable toast
</Button>
Dismissal
Use the timeout
option to automatically hide a toast after a delay. For accessibility, toasts have a minimum timeout of 5 seconds, and actionable toasts will not auto dismiss. Timers will pause when the user focuses or hovers over a toast.
import {Button, UNSTABLE_ToastQueue as ToastQueue} from '@react-spectrum/s2';
<Button
onPress={() => ToastQueue.positive('Toast is done!', {
timeout: 5000
})}>
Show auto-dismissing toast
</Button>
Programmatic dismissal
Use the close function returned by ToastQueue
to programmatically dismiss a toast that is no longer relevant. The onClose
event is triggered when a toast is dismissed, either by user action or programmatically.
import {Button, UNSTABLE_ToastQueue as ToastQueue, Text} from '@react-spectrum/s2';
import {useState} from 'react';
function Example() {
let [close, setClose] = useState(null);
return (
<Button
onPress={() => {
if (!close) {
let close = ToastQueue.negative('Unable to save', {
onClose: () => setClose(null)
});
setClose(() => close);
} else {
close();
}
}}>
<Text>{close ? 'Hide Toast' : 'Show Toast'}</Text>
</Button>
);
}
API
ToastContainer
Name | Type | Default |
---|---|---|
placement | ToastPlacement | Default: "bottom"
|
Placement of the toast container on the page. | ||
ToastQueue
neutral | ||
Queues a neutral toast. | ||
positive | ||
Queues a positive toast. | ||
negative | ||
Queues a negative toast. | ||
info | ||
Queues an informational toast. |
Toast Options
Name | Type | |
---|---|---|
id | string | |
The element's unique identifier. See MDN. | ||
timeout | number | |
A timeout to automatically close the toast after, in milliseconds. | ||
onClose |
| |
Handler that is called when the toast is closed, either by the user or after a timeout. | ||
shouldCloseOnAction | boolean | |
Whether the toast should automatically close when an action is performed. | ||
onAction |
| |
Handler that is called when the action button is pressed. | ||
actionLabel | string | |
A label for the action button within the toast. |