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 messagemessagemessagestringstringrequiredrequired
- Anchor to optsoptsoptsToastOptionsToastOptions
Anchor to show method-returnsReturnsstringstring
ToastOptions
- 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;
}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
- Anchor to idididstringstringrequiredrequired
Anchor to hide method-returnsReturnsvoidvoid
Preview
Examples
Toast
Default
shopify.toast.show('Message sent');Toast with duration
Description
Toast with duration
Default
shopify.toast.show('Product saved', { duration: 5000, });Toast with action
Description
Toast with action
Default
shopify.toast.show('Product saved', { action: 'Undo', onAction: () => {}, // Undo logic });Toast with dismiss callback
Description
Toast with dismiss callback
Default
shopify.toast.show('Product saved', { onDismiss: () => {}, // Dismiss logic });