Require user action before continuing

React

Angular

Web Components

const [open, setOpen] = useState(false);

<GoabButton onClick={() => setOpen(true)}>Open Basic Modal</GoabButton>
      <GoabModal
        heading="Are you sure you want to continue?"
        open={open}
        onClose={() => setOpen(false)}
        actions={
          <GoabButtonGroup alignment="end">
            <GoabButton type="secondary" size="compact" onClick={() => setOpen(false)}>
              Back
            </GoabButton>
            <GoabButton type="primary" size="compact" onClick={() => setOpen(false)}>
              Continue
            </GoabButton>
          </GoabButtonGroup>
        }
      >
        <p>You cannot return to this page.</p>
      </GoabModal>

Use a modal dialog to require users to confirm an action before proceeding, especially for irreversible operations or important decision points.

When to use

Use this pattern when:

The user is about to perform an action that cannot be undone
Navigation will cause data loss or prevent returning
Important information needs acknowledgment before proceeding
Users should confirm before submitting important forms

Considerations

Clearly explain the consequences of continuing
Provide a way to go back or cancel
Use clear, action-oriented button labels
Keep the modal content concise and focused
Ensure the primary action stands out from secondary options