Presents important feedback or information to users either in response to their actions or upon page load.
Usage Guidelines
Simple confirmation acknowledgements that don’t require additional detail should just use a confirmation button. If an error occurs or additional information is needed to clarify then the appropriate alert style may be dynamically presented.
Features
Dependencies
None
When a message needs to be displayed upon page load (there was an error confirming an email address, for example) the alert should appear statically in the upper left corner of the page. This location makes it noticeable even when the users screen is magnified.
The message should appear in the upper corner as part of the normal page load, with no animation.
At responsive sizes the alert occupies the entire top of the viewport.
Responsive alert.
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.
The animation for showing/dismissing a dynamic alert.
Initial version
Alerts