Toast
The Toast API displays a non-disruptive message that appears at the bottom of the interface to provide quick and short feedback on the outcome of an action. This API is modeled after the Web Notification API.
The Toast.show method displays a Toast notification in the Shopify admin. It accepts a variety of options to customize the behavior.
Anchor to show method-parametersParameters
- Anchor to messagemessagestringrequired
- Anchor to optsopts
Anchor to show method-returnsReturnsstring
ToastShow
- message
string - opts
ToastOptions
string(message: string, opts?: ToastOptions) => stringToastOptions
- action
Content of an action button.
string - duration
The length of time in milliseconds the toast message should persist.
number - isError
Display an error-styled toast.
boolean - onAction
Callback fired when the action button is clicked.
() => void - onDismiss
Callback fired when the dismiss icon is clicked
() => void
export interface ToastOptions {
/**
* The length of time in milliseconds the toast message should persist.
* @defaultValue 5000
*/
duration?: number;
/**
* Display an error-styled toast.
* @defaultValue false
*/
isError?: boolean;
/**
* Content of an action button.
*/
action?: string;
/**
* Callback fired when the action button is clicked.
*/
onAction?: () => void;
/**
* Callback fired when the dismiss icon is clicked
*/
onDismiss?: () => void;
}Anchor to hide methodhide method(
The Toast.hide method hides a Toast notification. This is not required to be called as the Toast notification will automatically hide after the duration has elapsed.
Anchor to hide method-parametersParameters
- stringrequired
Anchor to hide method-returnsReturnsvoid
ToastHide
- id
string
void(id: string) => voidToast
examples
Toast
shopify.toast.show('Message sent');
Preview
Anchor to examplesExamples
Toasts with different options
Anchor to example-toast-with-durationToast with duration
Toast with duration
Anchor to example-toast-with-actionToast with action
Toast with action
Anchor to example-toast-with-dismiss-callbackToast with dismiss callback
Toast with dismiss callback
Toast with duration
examples
Toast with duration
description
Toast with duration
shopify.toast.show('Product saved', { duration: 5000, });Toast with action
description
Toast with action
shopify.toast.show('Product saved', { action: 'Undo', onAction: () => {}, // Undo logic });Toast with dismiss callback
description
Toast with dismiss callback
shopify.toast.show('Product saved', { onDismiss: () => {}, // Dismiss logic });