The global alert can appear either statically on page load or dynamically in response to use action.
Alerts
Presents important feedback or information to users either in response to their actions or upon page load.
Usage Guidelines
Use global alerts for messages which are time sensitive but dismissible. The inline alerts may be used in this manner, or to provide more persistent information that relates to a particular region of the page.
Features
The global alert can appear either statically on page load or dynamically in response to use action.
The global alert is positioned in the upper left corner on desktop screens.
This ensures the alert is noticeable for screen magnification users.
For narrower screens the alert takes up the full width.
When a message is displayed upon page load the alert will appear anchored in the upper left corner of the viewport or if on a mobile device the message will appear across the top of the viewport. (It will stay in place as the user scrolls the page.) Text in the upper left corner of desktop devices (rather than center) will help ensure screen magnification users do not miss the message upon page load.
This type of alert can always be dismissed by clicking on the close icon.
An example use case for this type of alert would be when the user clicks a confirmation link in their email which loads a new window confirming that their address has been verified.
The message should appear in the upper corner as part of the normal page load.
Alerts can also appear dynamically in response to user actions like submitting a form, choosing an option, or completing an assignment. In this case the alert will animate down from the top.
Try to use this alert style sparingly, as it is fairly interruptive. For keyboard interactions, focus will automatically move from where the user is working to this element.
Example use cases which justify this alert style include:
The animation for showing/dismissing a dynamic alert.
The alert that applies to a specific task or section content will be displayed where the action occurred. These should only appear below the related content to preserve reading order.
By default the inline alert is also dismissable, but it can be made to display permanently if the information contained is persistently useful. An example would be a message saying that an email address hasn’t been confirmed yet.
The example of message appear below the content area.
A common pattern with alerts like this is to have the alert automatically dismiss itself after a set timeout. This can be problematic from an accessibility perspective, however, as users may need more time to notice, read, or interact with the alert. For this reason the alert component only supports manual alert dismissal.
Popover alerts
Content (task) level alert
Parker Malenke