showToast

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

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.

Only one toast can be shown at a time. Requests to display toasts may be queued and the toast may not be displayed immediately, if another toast is currently shown.

Note: When the timeout parameter is set to none (a toast that the user needs to close manually, or removed via code) 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.

Signature

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

Parameters

NameTypeDescription
configToastConfigToast configuration options.

ToastConfig Object

NameTypeDescription
actionToastActionOptional. Object representing a call-to-action that's displayed in the toast.
messagestringText that appears in the toast.
onCloseClickFunctionOptional. Callback function to run when the toast is closed by clicking its close button.
onToastSeenFunctionOptional. Callback function to run when the toast is seen by the user.
prioritystringPriority 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.
timeoutstringWhether the toast should disappear after a predefined timeout (6 seconds).
Options: none, normal.
typestringToast 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

NameTypeDescription
onClickFunctionCallback function to run after the call-to-action is clicked.
removeToastOnClickbooleanWhether to remove the toast after the call-to-action is clicked.
textstringText that appears in the call-to-action.
uiTypestringThe type of call-to-action. Options: button, link

Returns

Copy
1
{ remove: () => void }

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

Examples

To set up a dashboard client, refer to the setup guide.

Display a success toast when a product is updated

Copy
1
client.dashboard.showToast({
2
  message: 'Product updated successfully!',
3
  type: 'success',
4
});

Display an error toast with a 'Learn more' link

Copy
1
client.dashboard.showToast({
2
    message: 'Product update failed.',
3
    timeout: 'none',
4
    type: 'error',
5
    priority: 'low',
6
    action: {
7
      uiType: 'link',
8
      text: 'Learn more',
9
      removeToastOnClick: true,
10
      onClick: () => {
11
        // Logic to run when the user clicks the 'Learn more' link.
12
        console.log('Learn more clicked!');
13
      }
14
    }
15
  }
16
);

Remove a displayed toast

Copy
1
// Display a toast and save the remove function.
2
const { remove } = client.dashboard.showToast({
3
  message: 'Product updated successfully!',
4
  type: 'success',
5
  timeout: 'none',
6
});
7


8
// Remove the toast.
9
remove();
Was this helpful?
Yes
No