Alert
Alert
Introduction
Alerts are displayed inline with other page content and show status depending on the severity of the message.
Interactive example
Alerts have five status variants:
-
Neutral
-
Success
-
Warning
-
Error
-
Info
When to use
Use an alert to notify a user without blocking or interrupting them.
Position alerts in line with page content so that they are closely associated with the related content that follows them.
![An article titled ‘The perfect blend’ displaying a warning alert which reads ‘Take care. This article has yet to be reviewed and so may contain errors’.](/static/0a1857007396024c91cf697fe2bb4dbf/235b2/fig-1-do-use-alerts-inline-with-other-associated-page-content.png)
Use alerts to:
-
Summarise
form validation errors. -
Inform of failures in a particular part of an app.
-
Inform of a success when returning to a homepage, confirmation page or starting location.
-
Make important information stand out from surrounding content.
Include a button or link within an alert to provide related interactions.
Include a dismiss button within an alert to allow the alert to be dismissed.
![An article titled ‘The perfect blend’ showing an information alert with an action button that says ‘Post comment’ and a dismiss button. The alert message says ‘This is a brand new post. Show your appreciation by leaving a comment below.](/static/0a9abde131c6f1831db42626e9bc3079/235b2/fig-2-do-use-alerts-with-an-optional-action-and-dismiss-button.png)
When not to use
Don’t use alerts for passive feedback on a process, for example 'draft discarded' or 'email sent'. Use
Don’t overlay alerts on page content. Alerts are placed inline with the rest of the page content.
![An article titled ‘The perfect blend’ with an information alert overlaid on top of the page content.](/static/31e0ab511d628b26ea8764a3091a10ff/235b2/fig-3-dont-use-alerts-overlaid-on-page-content.png)
Use the
![A form titled ‘The perfect blend’ that contains 2 skeletons. A success alert shows an error message that says ‘There was an error on this page. Please fix any errors highlighted before continuing.’](/static/40809cfc9b08240acf7fb7ee472c3e1a/235b2/fig-4-dont-use-an-alert-variant-unrelated-to-its-message.png)
Content
Avoid using lengthy message content in an alert. Use dialogs or a
Use a title on an alert to provide a short description of the alert content.
![An image of an article titled ‘The perfect blend’ showing an info alert with a lengthy message that takes a lot of room to display among other page content.](/static/2cffc56eb553b432c2dd4ed0c6e7e82a/d2fbe/fig-5-avoid-using-lengthy-messages-within-an-alert.png)
Use the default icons with success, warning, error and info alerts.
When using neutral alerts, specify an icon to be used from the