Require user action before continuing

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

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

open = false;

  toggleModal(): void {
    this.open = !this.open;
  }

<goabx-button (onClick)="toggleModal()">Open Basic Modal</goabx-button>
<goabx-modal
  [open]="open"
  (onClose)="toggleModal()"
  heading="Are you sure you want to continue?"
  [actions]="actions">
  <p>You cannot return to this page.</p>
  <ng-template #actions>
    <goab-button-group alignment="end">
      <goabx-button type="secondary" size="compact" (onClick)="toggleModal()">Back</goabx-button>
      <goabx-button type="primary" size="compact" (onClick)="toggleModal()">Continue</goabx-button>
    </goab-button-group>
  </ng-template>
</goabx-modal>

const modal = document.getElementById("confirmation-modal");
const openBtn = document.getElementById("open-modal-btn");
const backBtn = document.getElementById("back-btn");
const continueBtn = document.getElementById("continue-btn");

function openModal() {
  modal.setAttribute("open", "true");
}

function closeModal() {
  modal.removeAttribute("open");
}

openBtn.addEventListener("_click", openModal);
backBtn.addEventListener("_click", closeModal);
continueBtn.addEventListener("_click", closeModal);
modal.addEventListener("_close", closeModal);

<goa-button version="2" id="open-modal-btn">Open Basic Modal</goa-button>
<goa-modal version="2" id="confirmation-modal" heading="Are you sure you want to continue?">
  <p>You cannot return to this page.</p>
  <div slot="actions">
    <goa-button-group alignment="end">
      <goa-button version="2" id="back-btn" type="secondary" size="compact">Back</goa-button>
      <goa-button version="2" id="continue-btn" type="primary" size="compact">Continue</goa-button>
    </goa-button-group>
  </div>
</goa-modal>