showToast( )
Displays a toast notification at the top of a dashboard page.
Description
This function can only be used in page code files for dashboard pages created in the Wix Editor or with Wix Blocks.
The showToast()
function returns an object containing a key called remove
.
The value of remove
is a function that removes the toast from the page.
Use the config
parameter to:
- Control the toast's content and appearance.
- Set callback functions to run when the user sees or closes the toast.
- Create a clickable call-to-action that displays in the toast.
When showing multiple toasts, requests to display toasts may be queued and the toast may not be displayed immediately. Toasts with a higher
priority level are displayed first. A toast's priority is defined using the config.priority
parameter. Toasts with the same priority level are displayed in the order
they're requested.
Note: When the timeout parameter is set to
"none"
the toast is rendered into the page layout and pushes the rest of the page down. When timeout is set to"normal"
, the toast appears on top of other content on the page.
Syntax
function showToast(config: ToastConfig): ToastReturn
showToast Parameters
NAME
TYPE
DESCRIPTION
Toast configuration options.
Returns
Return Type:
NAME
TYPE
DESCRIPTION
Removes the displayed toast.
Was this helpful?
1import { showToast } from 'wix-dashboard';23// ...45const config = {6 message: 'Product updated successfully!',7 type: 'success',8}910showToast(config);
1import { showToast } from 'wix-dashboard';23// ...45const config = {6 message: 'Product update failed.',7 timeout: 'none',8 type: 'error',9 priority: 'low',10 action: {11 uiType: 'link',12 text: 'Learn more',13 removeToastOnClick: true,14 onClick: () => {15 console.log('Learn more clicked!');16 },17 },18};1920showToast(config);
1import { showToast } from 'wix-dashboard';23// ...45const config = {6 message: 'Product updated successfully!',7 type: 'success',8 timeout: 'none',9}10const toastRemover = showToast(config);11setTimeout(toastRemover.remove(), 5000);1213/* Promise resolves a function that removes the toast. */
1import { showToast } from 'wix-dashboard';23// ...45const config = {6 message: 'Product updated successfully!',7 type: 'success',8 timeout: 'none',9}10let toastRemover = showToast(config);11$w('#removeToastButton').onClick(() => {12 toastRemover.remove();13})1415/* Promise resolves a function that removes the toast. */