Toast

The toast component is a non-disruptive message that appears at the bottom of the interface to provide quick, at-a-glance feedback on the outcome of an action.

Examples

Use to convey general confirmation or actions that aren’t critical. For example, you might show a toast message to inform the merchant that their recent action was successful.

Drag to resize example

Props

contentRequired
string
The content that should appear in the toast message
duration
number
The length of time in milliseconds the toast message should persist
error
boolean
Display an error toast.
onDismissRequired
() => void
Callback when the dismiss icon is clicked

Default toast

Use default toast for informative and neutral feedback.

Default toast with neutral color

Success toast

Use success toast to indicate that something was successful. For example, a product was successfully updated.

Success toast

Error toast

Use error toast to indicate that an operation has failed. For example, your phone is offline and need to reconnect to the internet. For all other error message types, follow the error message guidelines.

Error toast

With action

Use action when you have the ability to act on the message. For example, undo changes, or edit message. Keep the action label short, preferably 1 verb action.

Default toast with action to undo

Default toast

Use default toast for informative and neutral feedback.

On iOS, icons are available for cases where you want to re-inforce the message.

Default toast with neutral color

Success toast

Use success toast to indicate that something was successful. For example, a product was successfully updated.

On iOS, icons are available for cases where you want to re-inforce the message.

Success toast

Error toast

Use error toast to indicate that an operation has failed. For example, your phone is offline and need to reconnect to the internet. For all other error message types, follow the error message guidelines.

On iOS, icons are available for cases where you want to re-inforce the message.

Error toast

With action

Use action when you have the ability to act on the message. For example, undo changes, or edit message. Keep the action label short, preferably 1 verb action.

Default toast with action to undo

Required components

The toast component must be wrapped in the frame component or used in an embedded application.


Use in an embedded application

Passing an API key to the app provider component causes the toast component to delegate to the Shopify App Bridge instead of rendering as it would in a stand-alone application.

Note that when used in an embedded application, the toast component does not support multiple, simultaneous toast messages.

class EmbeddedAppToastExample extends React.Component {
  state = {
    showToast: false,
  };

  render() {
    const toastMarkup = this.state.showToast && (
      <Toast
        content="Message sent"
        onDismiss={() => this.setState({showToast: false})}
      />
    );

    return <AppProvider apiKey="YOUR_API_KEY">{toastMarkup}</AppProvider>;
  }
}

Best practices

Toast should:

  • Be used for short messages to confirm an action. Maximum of 2 lines of text.
  • Not be used for actionable links or messages.
  • Not be used for error messages.
  • Be displayed once at the time. If you need multiple toasts, queue them.

Content guidelines

Message

Messages should be:

  • Short and affirmative
  • Written in the pattern of: noun + verb
  • Product updated

  • Collection added

  • Customer updated

  • No internet connection

  • Your product has been successfully updated

  • We were unable to save the customer

  • Your Order was Archived Today

  • Discount: Saved successfully

Action

Action should:

  • Keep the action label short. Preferably 1 verb
  • Not have actions for dismissing toast
  • Undo

  • Change

  • Edit

  • View

  • Retry

  • OK

  • Got it

  • Cancel product

  • Continue to collection

  • Dismiss