• Plain JavaScript
  • React

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

Plain JavaScript

Anchor link to section titled "Plain JavaScript"

Example code

Anchor link to section titled "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

Anchor link to section titled "Create a toast notice"

Generate a toast notice:

Create a toast notice with a clickable action

Anchor link to section titled "Create a toast notice with a clickable action"

Generate a toast notice with a clickable action:

Create a toast error message

Anchor link to section titled "Create a toast error message"

Generate an error toast notice:

Subscribe to actions

Anchor link to section titled "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

Anchor link to section titled "Unsubscribe"

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

Dispatch show action

Anchor link to section titled "Dispatch show action"

Dispatch clear action

Anchor link to section titled "Dispatch clear action"

React

Anchor link to section titled "React"

useToast hook

Anchor link to section titled "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

Anchor link to section titled "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

Anchor link to section titled "Toast component"

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

Example code

Anchor link to section titled "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

Anchor link to section titled "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

On this page

  • Plain JavaScript
  • React