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.

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

1. Plain JavaScript
2. React hook
3. React 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.

Create a toast notice

Generate a toast notice:

Create a toast notice with a clickable action

Generate a toast notice with a clickable action:

Create a toast error message

Generate an error toast notice:

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:

Unsubscribe

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

Dispatch show action

Dispatch clear action

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.

Example code

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.

Toast component

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

Example code

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:

Styling a toast message as an error:

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