Toast
Toast
Resources
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.
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.
ToastGroup is a wrapper container for multiple toasts.
Use ToastGroup to position stacked toasts.
ToastGroup is a wrapper container for multiple Toasts.
Use ToastGroup to position stacked toasts.
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.
ToastGroup is a wrapper container for multiple toasts.
Use ToastGroup to position stacked toasts.
ToastGroup is a wrapper container for multiple Toasts.
Use ToastGroup to position stacked toasts.
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.
ToastGroup is a wrapper container for multiple toasts.
Use ToastGroup to position stacked toasts.
ToastGroup is a wrapper container for multiple Toasts.
Use ToastGroup to position stacked toasts.