Alerts Component

Whenever possible, add action button if there's a way for a user to quickly address the issue associated with an alert.

The close button is optional, depending on context. Consider adding one to let a user easily dismiss the alert.

Don’t use yellow or orange colors for errors because the contrast is not accessible. If you need to show a “notice” message or other non-critical communication, use the blue (informative) semantic color options. Reserve the red (negative) option only for errors that directly interrupt or block a user’s experience — not for nice-to-know information.

Alert banners should appear at the top of a page.

Don't show multiple alert banners at the same time. If a new alert appears with a higher priority message, it should replace an existing alert of lesser importance until the higher priority one has been addressed.

Overlay an alert when it's expected to fade in and out without impacting the content underneath it, and when it's not hiding any important actions or information by being there. An alert should only overlay content if it is dismissible.