Unsaved changes modal UX pattern

This modal is a confirmation modal that prevents users from leaving a create/edit record page without saving changes.

Structure

Title: “Close page”

Content: There are unsaved changes. If you would like to save changes, press the “Keep editing” button.”

Button: “Keep editing” in the primary style and a “Close without saving” in the default style.

Behavior

If changes have been made, the unsaved changes modal shall appear no matter how users try to leave the page (by clicking on the close icon, the cancel option or a FOLIO navigational element).