Toast

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 merchant that their recent action was successful.

Setup

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.

Create a toast notice

Generate a toast notice:

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