| Child pages (Children Display) |
|---|
Types
Product
Product alerts pertain to the product or system as a whole and are not specific to a task. For example, an alert that informs the user of a site-wide service disruption.
For a detailed explanation of how to use product alerts, please see the Guidelines for Product Alertsalerts article.
Page
Page alerts are contextual and provide users with nondisruptive feedback or the status of an action. For example, an alert that informs the user that their form content was submitted successfully.
For a detailed explanation of how to use page alerts, please see the Guidelines for Page Alertsalerts article.
In-line
In-line alerts are feedback messages that appear with an input as the result of an action. For example, an alert that informs the user that they did not complete a required field.
For a detailed explanation of how to use in-line validation messages, please see the Guidelines for In-line Alertsalerts article.
Modal
Modal alerts are disruptive and provide users with critical information that needs their attention or action. For example, an alert that asks the user to confirm that they want to leave a form without saving.
For a detailed explanation of how to use modals, please see the Guidelines for Modals article.
Statuses
Status | Usage | Actions | Colour | Icon |
|---|---|---|---|---|
Error | Inform users of a critical failure or that an action was unsuccessful | Persists until the user resolves the error | Red | “x” |
Warning | Inform users of something urgent or help the user avoid a problem | Persists until the user dismisses the notification or continues in their task | Yellow | Exclamation mark |
Informational | Provide users with important, time-sensitive information that may not be tied to their current action or task | Persists in a nonintrusive manner until the user dismisses the notification | Blue | “i” |
Success | Confirm a task was completed as expected | Persists in a nonintrusive manner until the user dismisses the notification or continues in their task | Green | Checkmark |