Alerts
Alerts notify merchants of important system information, and provide feedback on merchant actions.
![A button that's labeled "Add puzzle". Clicking the button displays a dismissible toast component that reads "Puzzle added".](/assets/apps/design-guidelines/alerts/task-alerts.png)
Task alerts
Task alerts are initiated in response to merchant actions during a specific task. Task alerts give merchants direct and immediate feedback.
The following are examples of task alerts:
- A form is successfully submitted.
- There's problem uploading something.
- The information provided is incorrect or doesn’t match the requested format.
![A dismissible informational banner on top of a page that reads "USPS has updated their rates."](/assets/apps/design-guidelines/alerts/system-alerts.png)
System alerts
System alerts are initiated by the application or system, independent of merchant actions. System alerts provide updates on background system status or out-of-context events that have finished.
The following are examples of system alerts:
- Lost network connection.
- A planned upgrade.
- The app subscription is expiring soon.
![The app body within the Shopify admin and the types of alert patterns, which include a dismissible banner for a system alert, (labeled 1), an inline alert for an error, (labeled 2), and a toast, (labeled 3)."](/assets/apps/design-guidelines/alerts/alert-patterns.png)
![The app body within the Shopify admin and the types of alert patterns, which include a dismissible banner for a system alert, (labeled 1), an inline alert for an error, (labeled 2), and a toast, (labeled 3)."](/assets/apps/design-guidelines/alerts/alert-patterns-mobile.png)
Alert patterns
Anchor link to section titled "Alert patterns"- Banner (system alert)
- Inline (task alert)
- Toast (task alert)
The following are common patterns available for merchant alerts:
Pattern | Definition | Duration and interaction | Used to communicate |
---|---|---|---|
Banner | Page-level alerts, often system related or Contextual alerts that are specific to a card, section, or modal |
Banners persist until merchants dismiss them, and can include an action button or link. | |
Inline | Provides merchants with feedback that’s as close to the source as possible | Inline alerts persist until merchants resolve the message. | |
Toast | Short, temporary messages that slide in and out of a page and provide succinct information. | Toast alerts without actions can disappear automatically or merchants can dismiss them. | Success |
Information
Anchor link to section titled "Information"When you use alerts to communicate important information to merchants, you can choose from a few standard patterns.
Informational banner
Anchor to section titled "Informational banner"![An informational banner in blue that reads "Order archived", with the "X" icon for dismissing it. The banner is highlighted in the app body and indicates when the order was archived.](/assets/apps/design-guidelines/alerts/informational-banner.png)
![An informational banner in blue that reads "Order archived", with the "X" icon for dismissing it. The banner is highlighted in the app body and indicates when the order was archived.](/assets/apps/design-guidelines/alerts/informational-banner-mobile.png)
Must Do
Informational banners must have a blue header and contain only lower priority information that’s always dismissible.![A blurred banner with the "X" icon for dismissing it in focus.](/assets/apps/design-guidelines/alerts/dismissible.png)
Must Do
Banners must be dismissible unless they contain critical information that merchants need to resolve to move forward. Dismissed banners shouldn't display again within the same user session.When you’re communicating success, it’s important to provide feedback. That means using patterns that inform merchants when a task has been completed successfully.
Toasts inform merchants of a process that the app has performed or will perform. Toasts display temporarily, at the bottom of the interface. Toasts don’t require any merchant input to disappear, and they shouldn’t interrupt the merchant experience.
![A dismissible toast placed in the bottom center of the app screen that reads "Message sent".](/assets/apps/design-guidelines/alerts/toast.png)
![A dismissible toast placed in the bottom center of the app screen that reads "Message sent".](/assets/apps/design-guidelines/alerts/toast-mobile.png)
Must Do
Display toasts in the bottom center of your app screen.![A dismissible toast that confirms a "Message sent" action.](/assets/apps/design-guidelines/alerts/toast-short-message.png)
Must Do
Use toasts for only short messages that confirm an action.![A dismissible toast that confirms an "Image deleted" action. The toast provides an "Undo" action.](/assets/apps/design-guidelines/alerts/toast-three-words.png)
Must Do
Make toast messages three words or fewer.![A dismissible toast that confirms a "Template duplicated" action.](/assets/apps/design-guidelines/alerts/toast-non-critical.png)
Must Do
Toasts are only for non-critical messages that are relevant at the moment.![A dismissible toast with a generic "Server error" message in red, with an icon.](/assets/apps/design-guidelines/alerts/toast-error-message.png)
Do Not
Don't use toasts for error messages, except for persistent errors such as connection errors. Refer to Polaris toast best practices for more information.Success banners
Anchor link to section titled "Success banner">/span>![A dismissible success banner in green that reads "Your puzzle has been created" and contains a "View report" button.](/assets/apps/design-guidelines/alerts/success-banner.png)
![A dismissible success banner in green that reads "Your puzzle has been created" and contains a "View report" button.](/assets/apps/design-guidelines/alerts/success-banner-mobile.png)
Must Do
Make success banners green and include next steps, if applicable.![A dismissible success toast in green with no buttons that reads "Message sent".](/assets/apps/design-guidelines/alerts/banner-success-message.png)
Do Not
Don’t use banners to show success messages for actions that merchants have completed. For user-initiated feedback, use success toasts instead.![A dismissible success toast in green with irrelevant content and no call-to-action.](/assets/apps/design-guidelines/alerts/banner-no-cta.png)
Do Not
Don’t use success banners if there isn’t a CTA.When you’re communicating warnings to merchants, you have different options based on what’s causing the warning.
Warning banners
Anchor link to section titled "Warning banners"Use warning banners to display information that needs attention or that merchants need to take action on.
![A warning banner in yellow that reads "Your shipping address needs to be updated" and includes a button that's labeled "Update shipping address".](/assets/apps/design-guidelines/alerts/warning-banner.png)
![A warning banner in yellow that reads "Your shipping address needs to be updated" and includes a button that's labeled "Update shipping address".](/assets/apps/design-guidelines/alerts/warning-banner-mobile.png)
Must Do
Make warning banners yellow. Seeing these banners can be stressful for merchants, so use them intentionally.Inline warning in a list
Anchor to section titled "Inline warning in a list"![A list of customers. One name has an inline warning that reads "2 open orders", with an icon.](/assets/apps/design-guidelines/alerts/inline-warning-highlight.png)
Must Do
Use inline warnings to draw attention to exceptions in a list, and encourage action when possible.![A list of customers. One name has an inline warning that reads "No address provided", with no icon.](/assets/apps/design-guidelines/alerts/inline-warning-color-only.png)
Do Not
Don’t use only color to convey a warning. Pair warning messages with a warning icon. This increases accessibility by providing additional identifiers.When you’re communicating problems and errors, use recognizable patterns that inform merchants of the alert’s significance. Put error messages as close to the problem as possible.
Error messages are necessary when something isn’t working as expected, or when merchants should be alerted to critical disruptions.
When errors happen, they can be frustrating or even scary. Guide merchants to a solution clearly and quickly.
![A dismissible error banner in red that reads "High risk of fraud detected". The banner includes a button that's labeled "View risk analysis".](/assets/apps/design-guidelines/alerts/error-banner.png)
![A dismissible error banner in red that reads "High risk of fraud detected". The banner includes a button that's labeled "View risk analysis".](/assets/apps/design-guidelines/alerts/error-banner-mobile.png)
Must Do
Make error banners red. Always tell merchants what happened and offer a path forward.![A dismissible error banner in red with an error code that's not human-readable. The language is dramatic, reading "Your puzzle has caused a complete failure of our interjambs systems".](/assets/apps/design-guidelines/alerts/error-scary.png)
Do Not
Don't use scary language, technical terms, and jargon.![A dismissible error banner in red that reads "Oops, we did it again".](/assets/apps/design-guidelines/alerts/error-idioms.png)
Do Not
Don't use humor, idioms, or other words and phrases that might not translate correctly.Critical banners
Anchor to section titled "Critical banners"![A dismissible critical banner in red that reads "You have reached your template limit". The banner provides a button to upgrade the plan to create more templates.](/assets/apps/design-guidelines/alerts/critical-banner-red.png)
Must Do
Make critical banners red and use them sparingly.![A dismissible critical banner in red that explains the issue and offers a way to contact support.](/assets/apps/design-guidelines/alerts/critical-banner-troubleshooting.png)
Must Do
Provide troubleshooting steps and a clear way to get support.Inline errors in forms
Anchor link to section titled "Inline errors in forms"When you’re validating form fields like text fields, place the error message directly below the affected field.
Use red for error message text, because it’s a common convention outside of Shopify.
![A form field filled with an email address that currently has a typo. An error message that explains the specific issue displays underneath the form.](/assets/apps/design-guidelines/alerts/inline-error-message.png)
Must Do
Place error messages directly below the affected field.![An error message that displays while the cursor is still in the form field, before the user has finished typing.](/assets/apps/design-guidelines/alerts/inline-error-while-typing.png)
Do Not
Don’t show an error while merchants are typing, because it can cause confusion. Wait until the keyboard focus moves away from the field, and then display the error.Inline errors in lists
Anchor link to section titled "Inline errors in lists"![A list of customers. One name has an inline warning that reads "No address provided", in red, with an icon.](/assets/apps/design-guidelines/alerts/inline-error-highlight.png)
Must Do
Highlight an exceptional state that encourages merchants to click on a list item. Lead with what went wrong.![A list of customers. One name has an inline warning that reads "Fraudulent charge" in red, with no icon.](/assets/apps/design-guidelines/alerts/inline-error-color-only.png)
Do Not
Don’t use only color to convey an error. Instead, pair the error message with an error icon. This increases accessibility by providing additional identifiers.Errors in cards, sections, or modals
Anchor link to section titled "Errors in cards, sections, or modals"![A system error that reads "Service outage", with an icon, but it displays as an inline error in a list of recent orders.](/assets/apps/design-guidelines/alerts/error-too-deep.png)
Do Not
Don’t nest error messages too deeply within your app’s hierarchy. If the error applies more broadly, then place it at the top of the affected element.![A dismissible modal that's used to present a "Username not valid" error message.](/assets/apps/design-guidelines/alerts/error-in-modal.png)