---
title: Toast API
description: The Toast API allows the display of a Toast component.
api_version: 2024-04
api_name: pos-ui-extensions
source_url:
  html: 'https://shopify.dev/docs/api/pos-ui-extensions/2024-04/apis/toast-api'
  md: 'https://shopify.dev/docs/api/pos-ui-extensions/2024-04/apis/toast-api.md'
---

# Toast APIAPIs

The Toast API allows the display of a Toast component.

## ToastApi

* show

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

  required

  Show a toast.

### ShowToastOptions

* duration

  ```ts
  number
  ```

```ts
export interface ShowToastOptions {
  duration?: number;
}
```

## Examples

Examples of using the Toast API

### Examples

* #### Display a Toast component from the tile

  ##### React

  ```tsx
  import React from 'react';
  import {
    Tile,
    useApi,
    reactExtension,
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile
        title="My App"
        onPress={() => api.toast.show('Toast content', 5000)}
        enabled
      />
    );
  };

  export default reactExtension('pos.home.tile.render', () => <SmartGridTile />);
  ```

  ##### TS

  ```ts
  import {Tile, extension} from '@shopify/ui-extensions/point-of-sale';

  export default extension('pos.home.tile.render', (root, api) => {
    const tile = root.createComponent(Tile, {
      title: 'My App',
      onPress: () => api.toast.show('Toast content', 5000),
      enabled: true,
    });

    root.append(tile);
  });
  ```