> 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.
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 (
);
}
```
> 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 (
);
}
```
> 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
```
Styling a toast message as an error:
```jsx
```
### 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|