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.²
3. Succinct and Informative
Keep Flash content succinct and informative – using a positive, clear, active voice. For more guidance on copywriting, please consult our Voice and Tone documentation.
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.