Description

A message popup is a small modal window containing a warning, error message or any other important information

It appears on user action and must be dismissed by the user before he can go back to using the parent application

Types

Type	Usage	Color
Info	General information about the action	Blue
Success	Action completed successfully	Green
Warning	Action caused or may cause a problem	Orange
Failure	Action not allowed or failed to complete	Red
Continuous Action	An action that takes more than 3 seconds (exact duration TBD)	Blue

Usage & Behaviour

General guidelines

The popup appears in the center of the page

Interaction

The user can dismiss the popup in one of three ways:
- Clicking the X icon on the upper-right corner
- Clicking the Ok button
- Clicking anywhere outside the popup

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

Message Popups