> 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. 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. 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|