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.