In This Article

showToast()

Displays a toast notification when invoked from a dashboard page or widget within a page.

Dashboard Toast Success

Use the config parameter to:

Control the toast's appearance.
Set callback functions to run when the user sees or clicks on the toast.
Display a clickable call-to-action that is displayed inside the toast.

Up to 3 toasts can be shown at a time. If other toasts are currently shown, requests to display toasts may be queued and the toast may not be displayed immediately.

Note: Toasts won't show when previewing in the editor, but they will show on the published version of the dashboard page.

Method Declaration

Copy


(config: ToastConfig) => { remove: () => void }

Parameters

Name	Type	Description
`config`	ToastConfig	Toast configuration options.

ToastConfig Object

Name	Type	Description
`action`	ToastAction	Optional. Object representing a call-to-action that's displayed in the toast.
`message`	`string`	Text that appears in the toast.
`onCloseClick`	`Function`	Optional. Callback function to run when the toast is closed by clicking its close button.
`onToastSeen`	`Function`	Optional. Callback function to run when the toast is seen by the user.
`priority`	`string`	Priority of the toast. If several toasts are triggered at the same time, they're displayed in the order of their priority levels. Default: `normal`. Options: `low`, `normal`, `high`.
`timeout`	`string`	Whether the toast should disappear after a predefined timeout (6 seconds). Options: `none`, `normal`.
`type`	`string`	Toast color and message type. Default: `standard`. Options: `standard`: Blue notification toast. `success`: Green success toast. `warning`: Yellow warning toast. `error`: Red error toast.

ToastAction Object

Name	Type	Description
`onClick`	`Function`	Callback function to run after the call-to-action is clicked.
`removeToastOnClick`	`boolean`	Whether to remove the toast after the call-to-action is clicked.
`text`	`string`	Text that appears in the call-to-action.
`uiType`	`string`	The type of call-to-action. Options: `button`, `link`

Returns

Copy


{ remove: () => void }

The object returned by showToast contains a method that can be used to remove the toast.

Examples

Note: To call this method in self-hosted apps, you need to create a client. See the setup guide for more details.

Display a success toast when a product is updated

Copy


import { dashboard } from "@wix/dashboard";

dashboard.showToast({
  message: "Product updated successfully!",
  type: "success",
});

Display an error toast with a 'Learn more' link

Copy


import { dashboard } from "@wix/dashboard";

dashboard.showToast({
  message: "Product update failed.",
  timeout: "none",
  type: "error",
  priority: "low",
  action: {
    uiType: "link",
    text: "Learn more",
    removeToastOnClick: true,
    onClick: () => {
      // Logic to run when the user clicks the 'Learn more' link.
      console.log("Learn more clicked!");
    },
  },
});

Remove a displayed toast

Copy


import { dashboard } from "@wix/dashboard";

// Display a toast and save the remove method.
const { remove } = dashboard.showToast({
  message: "Product updated successfully!",
  type: "success",
  timeout: "none",
});

// Remove the toast.
remove();

Did this help?