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:
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 noticeAnchor link to section titled "Create a toast notice"
Generate a toast notice:
Create a toast notice with a clickable actionAnchor link to section titled "Create a toast notice with a clickable action"
Generate a toast notice with a clickable action:
Create a toast error messageAnchor link to section titled "Create a toast error message"
Generate an error toast notice:
Subscribe to actionsAnchor 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:
UnsubscribeAnchor link to section titled "Unsubscribe"
unsubscribe to remove all current subscriptions on the toast message:
Dispatch show actionAnchor link to section titled "Dispatch show action"
Dispatch clear actionAnchor link to section titled "Dispatch clear action"
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.
Anchor link to section titled "Toast component"
Toast is a component that accepts props. For more information about options, refer to Props.
Providing additional optional properties:
Styling a toast message as an error:
||The content that should appear in the toast message||Yes|
||The length of time in milliseconds the toast message should persist. Defaults to 5000.|
||Display an error-styled toast|
||Callback fired when the dismiss icon is clicked||Yes|
||An object containing