ember install @freshworks/modal
Modals are an interactive component which appears on top of the page that stops any other interaction behind it. It has a focused task with few components within it like CTAs. Modals requires the users to critically respond to it in order to get back to primary task.
ScenarioBest use of modals is to get the task quickly done and may also support in completion of the primary task, for example: Creation of an entity and also editing it. Modal has to be relevant and carefully utilized as modal grasp users attention and may obstruct their current flow.
- Add scroll to body (CTA to remain fixed) incase the content is more.
- Icon to the titles has to be contextual
- Focus should be on the first item in modal as it opens
- Don’t exceed maximum width of 800 px
- Avoid using 2 levels of modal on modal.
- Don’t use modal if it is not related to the user’s current taskflow.
- Avoid modal for complex decision making that requires additional sources of information.
- Avoid closing the modal on clicking outside for confirmation modals and forms dialogs in which user confirmation or input required.