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 user that their recent action was successful.
You can use the toast action set in the following ways:
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.
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"
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"
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"
Providing additional optional properties:
Styling a toast message as an error:
| 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 |