# Toast API

The Toast API allows the display of a Toast component.

## ToastApi

### ToastApiContent

### show

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

  - ShowToastOptions: export interface ShowToastOptions {
  duration?: number;
}
Show a toast.

### ShowToastOptions

### duration

value: `number`


## Examples

The Toast API allows the display of a Toast component.



```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
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);
});

```

## Examples

The Toast API allows the display of a Toast component.



```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
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);
});

```