Icon
Text
Dismiss Control
Informational: Provides additional or contextual information to the user.
Confirm: Indicates the successful completion of an action the user has taken.
Warning: Informs the user that an error has occurred during the course of a workflow; should be used as a warning.
Alert: Indicates a system-level error has occurred.
Action: Indicates an action is processing.
1. Placement
Flash messages should be placed in a consistent location across all pages. Our Flash messages are always positioned on top of the App Header and on the highest Z-index setting of 9999.¹
2. Non-Dismissive
Non-dismissive Flash messages should stay on the screen for 8-10 seconds, then automatically fade out. Flash messages that are less than that amount of time, are hard for the user to read.²
Flash messages should be informative, yet concise. Try to limit the message to a single phrase or one short sentences. Use positive, clear language.
In the case of alerts or warnings, it is okay to include a second sentence that is a link to a followup action or more information. For success messages when something new has been created, it is usually a good idea to provide a link to go to that item.
Example
User created. Go to profile.
Unable to export placements. See details.
Success messages
Confirmation or success messages should appear when the user completes an action, confirming that the action has successfully completed. For example:
Item deleted
Item saved
Item created
Task completed
File uploaded
These messages should be clear and concise. Don’t include unnecessary words, including articles like “the" and "a". It’s almost always unnecessary to include “successful” or “successfully”, since that is redundant.
Warnings and alerts
See Error Handling.
Related Components
Additional Reading
“Toast Notifications.” PatternFly, www.patternfly.org/v3/pattern-library/communication/toast-notifications/index.html.
Munot, Sneha. “Toast Notification or Dialog Box?” Medium, UX Planet, 13 Dec. 2018, uxplanet.org/toast-notification-or-dialog-box-ae32ad53106d.
“Readability: the Optimal Line Length.” Readability: the Optimal Line Length - Articles - Baymard Institute, baymard.com/blog/line-length-readability.
“Web Content Accessibility Guidelines (WCAG) 2.0.” W3C, www.w3.org/TR/WCAG20/.
“Toast.” Shopify Polaris, polaris.shopify.com/components/feedback-indicators/toast.