Skip to main content

Toast

Note

This is a legacy API. Use the latest version of the App Bridge 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
  2. React hook
  3. React component

Anchor to Plain JavaScriptPlain JavaScript

Anchor to Example codeExample 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.

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

const app = createApp(config);

Anchor to Create a toast noticeCreate a toast notice

Generate a toast notice:

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

Anchor to Create a toast notice with a clickable actionCreate a toast notice with a clickable action

Generate a toast notice with a clickable action:

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

Anchor to Create a toast error messageCreate a toast error message

Generate an error toast notice:

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

Anchor to Subscribe to actionsSubscribe to actions

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

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();

Anchor to UnsubscribeUnsubscribe

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

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();

Anchor to Dispatch show actionDispatch show action

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

Anchor to Dispatch clear actionDispatch clear action

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

Anchor to ReactReact

Anchor to [object Object], hookuseToast 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.

Anchor to Example codeExample code

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.

Anchor to [object Object], componentToast component

Toast is a component that accepts props. For more information about options, refer to Props.

Anchor to Example codeExample code

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.

Providing additional optional properties:

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

Styling a toast message as an error:

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

Anchor to PropsProps

NameTypeDescriptionRequired
contentstringThe content that should appear in the toast messageYes
durationnumberThe length of time in milliseconds the toast message should persist. Defaults to 5000.
isErrorbooleanDisplay an error-styled toast
onDismiss() => voidCallback fired when the dismiss icon is clickedYes
actionobjectAn object containing content: String and onAction: FunctionNo
Was this page helpful?