Alerts, notifications and error messages
Author: Kevin Hatchoua | Last edit: March 21, 2023 | Design type: Alerting | Product area: Hybrid Cloud Console
Toast alerts
These guidelines are an extension of the PatternFly Guidelines.
Usage
TL;DR: Use toast alerts to communicate to the user that the system is responding to their inputs.
A toast alert should be used to communicate the status of a user’s actions (i.e. “Success”, “Error”, or “Still working on it…”), and Insights/Cloud Dot applications should use a toast notification after almost all user actions [1].
E.g.
When a user clicks a “submit” button
- If the process will take a while, show an “in progress” info-style alert [2].
- When successful, show a “successful” toast alert. If an item is created or edited which is not the one the user is looking at, provide a direct link to that item.
- If an error occurs, show an “error” toast alert. Include any directions to fix the problem.
When a user exports something
- If generating an export will take a while, show an “in progress” info-style alert.
- When successful, show a “successful” toast alert and automatically start the download of the exported item.
[1] There is an exception for actions that are “obvious” or happen in a form. But if the user has to click a “submit” button, use an alert.
[2] If there is a significant chance of error or failure for something processing, use a progress bar instead. Use the alert pattern when the processing is happening in the background and is very unlikely to fail.
Timeout
| Success message | Always dismissible; times out to disappear after 8 seconds |
| Processing message | Always dismissible; times out to disappear after 8 seconds |
| Error messages; Warning messages | Always dismissible; does not time out and must be manually dismissed |
| Ultra-high priority messages (as use cases dictate) | Always dismissible, the option to have them not time out and be manually dismissed. |
Content
Content should be brief, yet communicative, and appropriate to the user.
Refer to the Patternfly alert guidelines for more examples and details.
Examples of messages for Insights/cloud dot
Underlined words should be substituted with relevant ones for the use case.
The | character indicates a separation between the title, description, and action sections of an alert.
Success messages
“Policy updated”
“Playbook created | From the Remediations page, open Q2 Playbook”
“The requested export is being downloaded.”
“Changes saved | Your service enablement changes are being applied to connected systems.”
“15 systems removed from Insights”
In progress messages
“The requested export is being prepared. When ready, the download will start automatically.”
Error messages (More about errors here)
“The requested export could not be created. Please try again.”
