Toast
A toast displays a short message related to an action performed by a user.
Props
Name | Type | Default | Description |
---|---|---|---|
animate | boolean | Whether the toast has an animation upon entry | |
children | ReactNode | ||
className | string | Additional css classes that the toast should have | |
dismiss | number | Timeout in ms after which the toast should disappear by itself | |
id | string | Unique identifier of the toast. Usefull to retrieve a specific toast in the redux state. | |
onClose | () => void | Callback function that will run after the toast is dismissed | |
title | ReactNode | The content of the toast | |
type | "success" | "warning" | "error" | "info" | "download" | "success" | The type of the toast |
content deprecated | ReactNode | Use children instead | |
dismissible deprecated | boolean | Toast are always dismissible by the user - will have no effect | |
isSmall deprecated | boolean | Do not use - will have no effect | |
onDestroy deprecated | () => void | Use onClose instead | |
onRender deprecated | () => void |
Examples
Download Toast
Toast Notifier
Best Practices
- Only include information that is relevant to the performed action.
- Toasts may contain actions or links, preferably only one.
- Toasts should not prevent users from interacting with the page content. However, if it is unavoidable, consider using a prompt modal instead.
Variations
The result of the operation triggering the toast determines the type of toast to display.
Type | Purpose |
---|---|
Success | Confirms if operation was successfully executed. When the toast contains a link or action, it must be dismissed manually by the user. If not, it disappears automatically. |
Warning | Notifies users when the operation they launched may have not yet be completed, or may not have had the expected result. When the toast contains a link or action, it has to be manually dismissed by the user. If not, it disappears automatically. |
Error | Notifies users about an unsuccessful operation. The toast must be manually dismissed by users so that they don't miss this critical information. |
Related Components
If your use case doesn't match the guidelines above, consider using one of the following components instead:
- Prompt modal - When users shouldn't be able to interact with the page content while the message is displayed.
- Info box - When the message isn't related to an action the user has performed.
- Tooltip - When you want to provide additional information about an element on screen.