Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer
so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Oh snap! You got an error!
Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Icon (situational): Serves to give more context to the alert.
Text: Serves to tell users what the alert is about.
Close icon (situational): Can be used as a close button to allow users to dismiss the alert.
Container: Serves to house the content of the alert. Width and height will vary depending on
the amount of content within.
Within the alert
Ensure that there is a min of 16px vertical spacing and 24px horizontal spacing within
the alert and 16px spacing between icon and text. Base height 64px.
Alerts should be used:
When you need system status messaging - The alert may be in the form of a notification that keeps users
informed of the status of a system. This may or may not require the user to take action and/or respond.
Some examples of this can be in the form of errors, warnings or generic updates for the users.
Alerts should not be used:
For validation errors - Alerts should not be used for validation errors, these should be displayed on
the component that the user is on.
Multiple alerts - There should not be multiple alerts on a single page. E.g A notification alert and a
error/warning alert. Use the one that is most important to the user.
Do not use multiple notifications on a page
This may overwhelm or annoy users and may result in them ignoring the notification altogether.
Avoid triggering interaction with a badge as they may be confused as small buttons.
Do not use alerts that are not related to a user’s goal.