Versions Compared

Version Old Version 9 New Version 10
Changes made by

Liav Nadler

Liav Nadler

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Lead:  Liav Nadler  ONGOING


Related pages: Toast, Dialog


Table of Contents

Description

...

Usually it appears on user's action (e.g. clicking help icon) and it must be dismissed by the user

The popup may contains these elements:

  • Header, including a title (e.g. "Warning") and a closing icon
  • Icon (e.g. question mark icon for help)
  • The message text
  • Primary action button (Usually OK)
  • Cancel button (when relevant)

Types


Type
Example
Help

Information

Warning

Error


...

  • The popup appears in the center of the page and cannot be moved around the screen 
  • Transparent background?
  • The popup has a fixed width
  • The height of the popup is determined by the length of the message text, when the minimal popup should contain up to two lines of text

Interaction

...

  • that the action completed successfully
  • When relevant, clicking the Cancel button closes the popup without performing any other action

Validations and errors

N/A

...

  • The message popup is more intrusive than a toast. Use it only for important messages (or long messaged in the case of help)
  • Keep the title short and informative
  • Keep the message text short and informative

Dialog

A dialog is a small window that prompts the  user to make a decision or enter additional information.

A dialog does not fill the screen and is normally used for modal events that require users to take an action before they can proceed

Accessibility compliance

<<In general each component should be A11y complied,  please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>

...