--- title: Toast description: 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). api_name: app-bridge-library source_url: html: https://shopify.dev/docs/api/app-bridge-library/apis/toast md: https://shopify.dev/docs/api/app-bridge-library/apis/toast.md --- # 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). ## show method([message](#showmethod-propertydetail-message)​,[opts](#showmethod-propertydetail-opts)​) The `Toast.show` method displays a Toast notification in the Shopify admin. It accepts a variety of options to customize the behavior. ### Parameters * message string required * opts ToastOptions ### Returnsstring ### ToastOptions * action Content of an action button. ```ts string ``` * duration The length of time in milliseconds the toast message should persist. ```ts number ``` * isError Display an error-styled toast. ```ts boolean ``` * onAction Callback fired when the action button is clicked. ```ts () => void ``` * onDismiss Callback fired when the dismiss icon is clicked ```ts () => void ``` ```ts 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; } ``` ## hide method([id](#hidemethod-propertydetail-id)​) 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. ### Parameters * id string required ### Returnsvoid ### Examples * #### Toast ##### Default ```js shopify.toast.show('Message sent'); ``` ## Preview ![](https://shopify.dev/images/templated-apis-screenshots/app-bridge-library/toast.png) ## Examples Toasts with different options Toast with duration Toast with duration Toast with action Toast with action Toast with dismiss callback Toast with dismiss callback ### Examples * #### Toast with duration ##### Description Toast with duration ##### Default ```js shopify.toast.show('Product saved', { duration: 5000, }); ``` * #### Toast with action ##### Description Toast with action ##### Default ```js shopify.toast.show('Product saved', { action: 'Undo', onAction: () => {}, // Undo logic }); ``` * #### Toast with dismiss callback ##### Description Toast with dismiss callback ##### Default ```js shopify.toast.show('Product saved', { onDismiss: () => {}, // Dismiss logic }); ```