Make alert banners actionable

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

Consider including a close button

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

Use alert banners only for system-level messaging

Alert banners should be reserved only for high-signal, system-level alert messages, such as internet connection issues, expirations of subscriptions, or major changes.

For in-app notifications, lightweight confirmations of actions, or more promotional messaging, use a toast, badge, or other component.

Be aware of color and semantic meaning

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 gray (neutral) or 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.

Include only one action per alert banner

Don't include more than one action in an alert banner. Having more than one action to choose from can be overwhelming, and it can become difficult for users to decide what to do next in such a small space.

Place alert banners at the top

Alert banners should appear at the top of a page, below the header.

Don't stack alert banners

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

Overlay content

Overlay an alert banner 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 banner should only overlay content if it is dismissible.

Push content

Push an alert banner when it's expected to stay in place, when it's not dismissible, or when no information should be hidden from the view.

Persist errors to maintain visibility

If a user dismisses an alert banner without addressing an error that needs to be resolved, it should come back into view at the next possible occasion.

Don't let alert banners time out

Never allow alert banners to time out. Since these are system-level messages, they should not dismiss on their own unless there is a change in the system that resolves an issue (e.g., regaining internet connectivity after losing it).

Alert banners in app frame

When used in the app frame, the alert banner appears above the Top App Bar (TAB) and header, or above the header if the TAB isn’t active.

Learn more about how the Top App Bar (TAB) works in the app frame.