---
title: Toast API
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.
source_url:
  html: >-
    https://shopify.dev/docs/api/app-home/apis/user-interface-and-interactions/toast-api
  md: >-
    https://shopify.dev/docs/api/app-home/apis/user-interface-and-interactions/toast-api.md
---

# Toast API

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

### Use cases

* **Success feedback:** Show confirmation messages after successful save, create, or update operations.
* **Error notification:** Display non-blocking error messages when operations fail.
* **Action buttons:** Include action buttons in toasts for quick follow-up actions like undoing changes.
* **Temporary alerts:** Communicate brief, time-limited messages that don't require user acknowledgment.

### Methods

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

* **hide**

  **ToastHide**

  **required**

  Hides a Toast notification in the Shopify admin.

* **show**

  **ToastShow**

  **required**

  Displays a Toast notification in the Shopify admin.

### ToastHide

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.

* id

  ```ts
  string
  ```

returns

```ts
void
```

### ToastShow

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

* message

  ```ts
  string
  ```

* opts

  ```ts
  ToastOptions
  ```

returns

```ts
string
```

### 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
  ```

Examples

## Preview

![Show a basic toast. This example displays a minimal toast notification with only a message string. Use this for simple confirmations like saving a product, sending a message, or completing a quick action.](https://shopify.dev/assets/assets/images/apps/tools/app-bridge-toast-BMc-izxL.png)

### Examples

* ####

  ##### Description

  Show a basic toast. This example displays a minimal toast notification with only a message string. Use this for simple confirmations like saving a product, sending a message, or completing a quick action.

  ##### js

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

* ####

  ##### Description

  Set a custom duration. This example displays a toast with a custom \`duration\` option set to 5000 milliseconds. Use this when the default display time is too short for the message content, such as longer confirmation messages or status updates that merchants need more time to read.

  ##### js

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

* ####

  ##### Description

  Add an action button. This example displays a toast with an \`action\` label and an \`onAction\` callback. Use this to offer an undo option after destructive actions, a retry option after failed operations, or a navigation shortcut to view the result of a completed action.

  ##### js

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

* ####

  ##### Description

  Handle dismiss. This example displays a toast with an \`onDismiss\` callback that fires when the toast is closed. Use this to trigger follow-up logic after the notification disappears, such as refreshing data, logging analytics events, or advancing a multi-step workflow.

  ##### js

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

***