> Note:
> This is a legacy API. Use the latest version of the App Bridge [Toast](/docs/api/app-bridge-library/apis/toast) instead.

The `Toast` action set 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. Use `Toast` to convey general confirmation for actions that aren’t critical. For example, you might show a toast message to inform the user that their recent action was successful.

<img alt="An image of the Shopify admin. Overlaying the admin is a notification box at the bottom of the image which contains the label: Message sent. The toast notification also displays an x to dismiss it." src="/assets/apps/tools/app-bridge-toast.png" style="display: block; width: 100%; max-width: 524px">



You can use the toast action set in the following ways:

1. [Plain JavaScript](#plain-javascript)
2. [React hook](#usetoast-hook)
3. [React component](#toast-component)

## Plain JavaScript

### Example code

Create an app and import the `Toast` module from `@shopify/app-bridge/actions`. Note that we'll be referring to this sample application throughout the examples below.

> Note
> In the following example, `config` is a valid App Bridge configuration object. Learn more about [configuring App Bridge](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/app-setup#initialize-shopify-app-bridge-in-your-app).


```js
import createApp from '@shopify/app-bridge';
import {Toast} from '@shopify/app-bridge/actions';

const app = createApp(config);
```

### Create a toast notice

Generate a toast notice:

```js
const toastOptions = {
  message: 'Product saved',
  duration: 5000,
};
const toastNotice = Toast.create(app, toastOptions);
```

### Create a toast notice with a clickable action

Generate a toast notice with a clickable action:

```js
const toastOptions = {
  message: 'Product saved',
  duration: 5000,
  action: {
    content: "Click here",
    onAction: () => console.log('👋 Action clicked')
  }
};
const toastNotice = Toast.create(app, toastOptions);
```

### Create a toast error message

Generate an error toast notice:

```js
const toastOptions = {
  message: 'Error saving',
  duration: 5000,
  isError: true,
};
const toastError = Toast.create(app, toastOptions);
```

### Subscribe to actions

You can subscribe to toast actions by calling `subscribe`. This returns a function that you can call to unsubscribe from the action:

```js
const toastNotice = Toast.create(app, {message: 'Product saved'});
const showUnsubscribe = toastNotice.subscribe(Toast.Action.SHOW, data => {
  // Do something with the show action
});

const clearUnsubscribe = toastNotice.subscribe(Toast.Action.CLEAR, data => {
  // Do something with the clear action
});

// Unsubscribe
showUnsubscribe();
clearUnsubscribe();
```

### Unsubscribe

You call `unsubscribe` to remove all current subscriptions on the toast message:

```js
const toastNotice = Toast.create(app, {message: 'Product saved'});
toastNotice.subscribe(Toast.Action.SHOW, data => {
  // Do something with the show action
});
toastNotice.subscribe(Toast.Action.CLEAR, data => {
  // Do something with the clear action
});

// Unsubscribe
toastNotice.unsubscribe();
```

### Dispatch show action

```js
const toastNotice = Toast.create(app, {message: 'Product saved'});
toastNotice.dispatch(Toast.Action.SHOW);
```

### Dispatch clear action

```js
const toastNotice = Toast.create(app, {message: 'Product saved'});
toastNotice.dispatch(Toast.Action.CLEAR);
```

## React

### `useToast` hook

`useToast` is a hook that accepts no arguments and returns a `show` method. The `show` method accepts `content` and an `options` object, which contains the rest of the [Props](#props).

#### Example code

```jsx
import {Provider, useToast} from '@shopify/app-bridge-react';

function MyApp {
  // Setup appBridgeConfig...

  const {show} = useToast();

  return (
    <Provider config={appBridgeConfig}>
      <Button onClick={() => {
        show('Success! 🎉', {duration: 2000, onDismiss: () => console.log('👋 Toast dismissed')})
      }}>Show toast</Button>
    </Provider>
  );
}
```
> Note
> When using the App Bridge React library, you need to wrap all of your App Bridge React code inside of a single App Bridge [`Provider`](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/using-react#provider).


### `Toast` component

`Toast` is a component that accepts props. For more information about options, refer to [Props](#props).

#### Example code

```jsx
import {Provider, Toast} from '@shopify/app-bridge-react';

function MyApp {
  // Setup appBridgeConfig...

  return (
    <Provider config={appBridgeConfig}>
      <Toast content="Success! 🎉" />
    </Provider>
  );
}
```
> Note
> When using the App Bridge React library, you need to wrap all of your App Bridge React code inside of a single App Bridge [`Provider`](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/using-react#provider).


Providing additional optional properties:

```jsx
<Toast content="Success! 🎉" duration={2000} onDismiss={myHandler}/>
```

Styling a toast message as an error:

```jsx
<Toast content="Something went wrong! 😔" isError={true} />
```

### Props

|Name|Type|Description|Required|
|---|---|---|---|
|content|`string`|The content that should appear in the toast message|Yes|
|duration|`number`|The length of time in milliseconds the toast message should persist. Defaults to 5000.||
|isError|`boolean`|Display an error-styled toast||
|onDismiss|`() => void`|Callback fired when the dismiss icon is clicked|Yes|
|action|`object`|An object containing `content: String` and `onAction: Function`|No|