Require user action before continuing

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>

open = false;

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

<goab-button (onClick)="toggleModal()">Open Basic Modal</goab-button>
<goab-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">
      <goab-button type="secondary" size="compact" (onClick)="toggleModal()"
        >Back</goab-button
      >
      <goab-button type="primary" size="compact" (onClick)="toggleModal()"
        >Continue</goab-button
      >
    </goab-button-group>
  </ng-template>
</goab-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>