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
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 user’s 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.
Alerts come in two different types, Error and Success. Try to avoid using the success style unless you need to present more information about the success. Confirmation Buttons are a better pattern for typical cases.
The two alert styles. Note that success alerts should only be used when there is additional information that needs to be conveyed.
Initial version
Alerts