Toast
Toast displays a small pop-up notification that provides short feedback in response to a user action or system event related to a workflow or application outside the user’s current focus. It can communicate new information, errors, warnings or successful completion of a process or task.
| Salt package | @salt-ds/core |
|---|---|
| Available since | 1.0.0 |
Use a toast without a status when you need to display general information in a neutral tone.
Use the info toast when you need to display general information with additional emphasis. An info icon displays alongside a title and supporting message.
Use the error toast to communicate a critical issue. An error icon displays alongside a title and supporting message.
Use the warning toast to inform users of an issue or potential issue. A warning icon displays alongside a title and supporting message.
Use the success toast to communicate the successful completion of an action. A success icon displays alongside a title and supporting message.
Use the icon prop to customize the icon shown in the toast, the custom icon will inherit the status color by default.
To control where a toast appears on the screen, wrap your Toast component(s) with your own container element and use CSS to position it as needed.
For example, to position a toast in the bottom right corner:
Example usage:
You can adjust the positioning and styles to fit your needs.
Use a toast without a status when you need to display general information in a neutral tone.
Use the info toast when you need to display general information with additional emphasis. An info icon displays alongside a title and supporting message.
Use the error toast to communicate a critical issue. An error icon displays alongside a title and supporting message.
Use the warning toast to inform users of an issue or potential issue. A warning icon displays alongside a title and supporting message.
Use the success toast to communicate the successful completion of an action. A success icon displays alongside a title and supporting message.
Use the icon prop to customize the icon shown in the toast, the custom icon will inherit the status color by default.
To control where a toast appears on the screen, wrap your Toast component(s) with your own container element and use CSS to position it as needed.
For example, to position a toast in the bottom right corner:
Example usage:
You can adjust the positioning and styles to fit your needs.
Use a toast without a status when you need to display general information in a neutral tone.
Use the info toast when you need to display general information with additional emphasis. An info icon displays alongside a title and supporting message.
Use the error toast to communicate a critical issue. An error icon displays alongside a title and supporting message.
Use the warning toast to inform users of an issue or potential issue. A warning icon displays alongside a title and supporting message.
Use the success toast to communicate the successful completion of an action. A success icon displays alongside a title and supporting message.
Use the icon prop to customize the icon shown in the toast, the custom icon will inherit the status color by default.
To control where a toast appears on the screen, wrap your Toast component(s) with your own container element and use CSS to position it as needed.
For example, to position a toast in the bottom right corner:
Example usage:
You can adjust the positioning and styles to fit your needs.