---
title: Toast API
description: >-
  The Toast API provides temporary notification functionality for POS UI
  extensions, allowing you to display brief, non-intrusive messages to users for
  feedback, confirmations, and status updates that automatically disappear after
  a specified duration. Toast messages appear as overlay notifications that
  don't interrupt the user's workflow.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/latest/target-apis/standard-apis/toast-api
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/latest/target-apis/standard-apis/toast-api.md
---

# Toast API

The Toast API provides temporary notification functionality for POS UI extensions, allowing you to display brief, non-intrusive messages to users for feedback, confirmations, and status updates that automatically disappear after a specified duration. Toast messages appear as overlay notifications that don't interrupt the user's workflow.

## ToastApi

The `ToastApi` object provides methods for displaying temporary notification messages. Access these methods through `shopify.toast` to show user feedback and status updates.

* show

  (content: string, options?: ShowToastOptions) => void

  required

  Displays a toast notification with the specified text content. The message appears as a temporary overlay that automatically dismisses after the specified duration. Use for providing immediate user feedback, confirming actions, or communicating status updates without interrupting the user's workflow.

### ShowToastOptions

Specifies configuration options for displaying toast notifications. Controls the duration and display behavior of temporary notification messages.

* duration

  The duration in milliseconds that the toast message should remain visible before automatically dismissing. If not specified, the toast will use the default system duration. Use shorter durations for simple confirmations and longer durations for important messages that users need time to read.

  ```ts
  number
  ```

```ts
export interface ShowToastOptions {
  /**
   * The duration in milliseconds that the toast message should remain visible before automatically dismissing. If not specified, the toast will use the default system duration. Use shorter durations for simple confirmations and longer durations for important messages that users need time to read.
   */
  duration?: number;
}
```

## Best practices

* **Write clear, concise messages:** Keep content brief since toasts disappear automatically.
* **Use appropriate timing:** Choose durations that give users enough time to read without keeping visible too long.
* **Provide meaningful feedback:** Use toasts to confirm actions, explain errors, or communicate status changes.
* **Avoid overuse:** Reserve for important feedback. Don't show multiple toasts simultaneously.
* **Handle multiple toast messages:** Multiple toast messages may overlap or interfere with each other if shown in rapid succession. Consider queuing or spacing out notifications appropriately.

## Limitations

Toast content is limited to plain text and can't include rich formatting, links, or interactive elements.

## Examples

Learn how to display temporary notification messages for user feedback.

### Examples

* #### Display a toast notification for a custom duration

  ##### Description

  Configure custom display durations for toast notifications to match message importance and length. This example demonstrates using the \`duration\` option with \`shopify.toast.show()\` to control how long notifications remain visible. Use shorter durations for quick confirmations and longer durations for messages that require more reading time.

  ##### jsx

  ```jsx
  import {render} from 'preact';

  export default async () => {
    render(<Extension />, document.body);
  };

  const Extension = () => {
    const showShortToast = () => {
      shopify.toast.show('Quick message', {duration: 2000});
    };

    const showLongToast = () => {
      shopify.toast.show('This is a longer notification', {duration: 8000});
    };

    return (
      <s-page heading="Toast with Duration">
        <s-scroll-box>
          <s-stack direction="block">
            <s-button onClick={showShortToast}>Show Short Toast (2s)</s-button>
            <s-button onClick={showLongToast}>Show Long Toast (8s)</s-button>
          </s-stack>
        </s-scroll-box>
      </s-page>
    );
  };
  ```

* #### Display a toast notification from a tile

  ##### Description

  Display a toast notification from a tile. This example demonstrates using \`shopify.toast.show()\` to display a brief, non-intrusive message that automatically disappears after a specified duration. This is useful for confirmations, status updates, or success messages that don't require user interaction.

  ##### jsx

  ```jsx
  import {render} from 'preact';

  export default async () => {
    render(<Extension />, document.body);
  };

  const Extension = () => {
    return (
      <s-tile
        heading="My App"
        onClick={() => shopify.toast.show('Toast content', {duration: 5000})}
      />
    );
  };
  ```