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](https://developer.mozilla.org/en-US/docs/Web/API/Notification).

shopify.toast.show('Message sent');

show method

The `Toast.show` method displays a Toast notification in the Shopify admin. It accepts a variety of options to customize the behavior.

ToastShow

Returns: string

Params:

message: string

opts: ToastOptions

type ToastShow = (message: string, opts?: ToastOptions) => string;

ToastOptions

action

Content of an action button.

duration

The length of time in milliseconds the toast message should persist.

isError

Display an error-styled toast.

onAction

Callback fired when the action button is clicked.

onDismiss

Callback fired when the dismiss icon is clicked

hide 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.

ToastHide

Returns: void

Params:

id: string

type ToastHide = (id: string) => void;

Examples

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](https://developer.mozilla.org/en-US/docs/Web/API/Notification).

Toast with duration

shopify.toast.show('Product saved', {
  duration: 5000,
});

shopify.toast.show('Product saved', {
  duration: 5000,
});

Toast with action

shopify.toast.show('Product saved', {
  action: 'Undo',
  onAction: () => {}, // Undo logic
});

shopify.toast.show('Product saved', {
  action: 'Undo',
  onAction: () => {}, // Undo logic
});

Toast with dismiss callback

shopify.toast.show('Product saved', {
  onDismiss: () => {}, // Dismiss logic
});

shopify.toast.show('Product saved', {
  onDismiss: () => {}, // Dismiss logic
});