Skip to main content

Modal

A modal is used to reveal critical information, show information without losing context, or when the system requires a user response. A modal is also named as dialog in PrimeVue, however, the funcitonality remains the same for both.

Variants​

There are two different modals: Default and Danger with 3 different variants for each in terms of size.

Modal types

Demo​

Modal demo

Guidance​

  • The header is either a question, a descriptive phrase, or title. The header also contains the close icon in every instance.
  • The content in the body should never be ambiguous and unclear. Strive to be as concise as possible and provide the user with specific information in regards to their task.
  • There should be no more than 3 actions and no fewer than 1. Actions should always be located within an action bar at the bottom of the modal.
  • Modal should always open with a backdrop provided by GEL.

When to use​

  • When the task requirers users input to be completed.
  • To reveal critical information as contents inside the modal without losing the context.
  • Confirmation leads to non-revertible destruction action.

When not to use​

  • If the triggered action is confirmation only and user attention is not high, consider using a confirm popup instead.
  • When content can be displayed inline that does not require user action, consider using popover or tooltip.
  • If you need to deliver a brief, auto-expiring element for a user to consume while staying focused on their task, use a toast instead.

Designer assets​

figma
Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact GEL Community.

Developer API​

vue
Hey Developers, find out the tech documentation of this compoment on PrimeVue. If you have issue, please contact GEL Community
Last updated on