Alerts Stable

Alerts are notifications that attract the user’s attention. They can be directly related to an interactive process and give the user feedback on the success or failure of an action.

General guidance

Alerts can display successes, warnings or errors. The content can be supported by a status icon. Alerts do not block user interactions with the content. Apart from modal dialogs, Alerts only provide information and do not need any mandatory user interaction to continue. But when the user interacts with them, they will disappear.

Structure

Alert structure
Alert structure
  1. State indicator Optional
  2. Title Optional
  3. Close icon Optional, when no further interaction options are provided
  4. Content container Mandatory
  5. Bottom bar Optional, when further interaction options are provided
Alert

Alerts are notifications that attract the user’s attention. They can be directly related to an interactive process and give the user feedback on the success or failure of an action.

Dos and don’ts

  • Do not use Alerts when you need a decision by the user. Use Modal Dialogs in that case.
  • Do not use status icons if it is not clear whether the message is positive or negative.