Skip to content

Alerts

An alert displays important information and could provide related optional actions.

Usage

Alerts show up in task flows, to notify users about the status of an action or system.

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task and provides actions for users to address (or dismiss the alert).

They're persistent and non-modal, allowing the user to either ignore them or interact with them at any time.

Only one alert should be shown at a time.

Design guidelines

Anatomy

  1. Icon
  2. Title
  3. Message
  4. Action

Icon

Inform users of the kind of alert.

Title

Gives users a quick overview of the alert.

  • The title should be short and descriptive, explaining the most important piece of information.
  • When possible, communicate the main message using just the title.

Message

Provides additional information or steps for the user to take.

  • Be concise and avoid repeating or paraphrasing the title.
  • Limit content to one or two short sentences.
  • Explain how to resolve the issue by including any troubleshooting actions or next steps.

Action

Text button that allows users to address the alert or navigates them to a page with further details.

  • Keep labels concise and clearly indicate the action the user can take.
  • Limit action labels to one or two words.

Placement

Alerts should be placed close to the item or section needing attention.

Content alert

Alerts should appear at the top of the main container, right below the page title or page header.

Dialog form alert

On dialog forms, we recommend placing alerts at the bottom, above the action buttons."

Alerts must not appear in front of other components

Sizing

The width of alerts varies depending on content and layout. They should expand to fill the container's width in which they are located, taking into account the margins. The height varies according to the length content, which should not exceed two lines of text.

Alerts should expand to fill the container's width

Dismissal

Alerts are not dismissed automatically. They persist on the page until the users dismiss them or when they take actions that resolve the alerts.

This dismissal should happen by clicking an action button in the top right corner of the alert container.

It should not be included if the alert needs to remain visible at all times, and the user needs to perform another action on the same page to dismiss it.

Best practices

  • Place alerts near their related items.
  • In forms, alerts can be placed either at the top or bottom.
  • Keep the message under two lines.
  • Do not cover other content with alerts.
  • The alert width varies based on the context and page layout.
  • Be descriptive and give users clear next steps.