Description

A message popup is a small modal window containing a warning, error message, help text other important information

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

The popup contains of these elements:

Header, including the title (e.g. "Warning") and a close icon
Message type icon (e.g. question mark icon for help)
The message text
Primary action button
Cancel button (optional)

Types

Type	Example
Help
Information
Warning
Error

Usage & Behaviour

General guidelines

The popup appears in the center of the page

Interaction

The user can dismiss the popup by either clicking the X icon on the upper-right corner or by clicking the OK button
When relevant, clicking the Cancel button closes the popup without performing any other action

Validations and errors

N/A

Best practices

<<e.g. Slider should display a .label its on>>

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>>

Focus management

<<How will the component work with keyboard only - without a mouse. Can be reference if written above

We already set a general guidelines described in Keyboard & Focus Management Guidelines >>

Screen reader support

<<Make sure the components support screen reader for content or behaviour where needed - see Screen Reader Guidelines >>

Contrast & size compliance

<<Visual designers must comply with the minimal of Contrast + Font Size Guidelines for each component>>

Design

Zeplin link	Screen thumbnail
<<Zeplin Link>>	<<Screen with 200 width>>

Code

<<a box containing the code - discuss with Femi>>