Skip to main content


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.


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

Modal types


Modal demo


  • 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

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

Developer API

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