A toast displays a short message related to an action performed by a user.
Whether the toast has an animation upon entry
Additional css classes that the toast should have
Timeout in ms after which the toast should disappear by itself
Unique identifier of the toast. Usefull to retrieve a specific toast in the redux state.
Callback function that will run after the toast is dismissed
The content of the toast
The type of the toast
Use children instead
Toast are always dismissible by the user - will have no effect
Do not use - will have no effect
Use onClose instead
- 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.
The result of the operation triggering the toast determines the type of toast to display.
|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.|
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.