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.
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
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
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
Display an error toast with a 'Learn more' link
Copy
Remove a displayed toast
Copy
Did this help?