Warn a user of a deadline

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

<GoabxButton type="secondary" onClick={() => setOpen(true)}>
        Save for later
      </GoabxButton>
      <GoabxModal
        heading="Complete submission prior to 1PM"
        calloutVariant="important"
        open={open}
        onClose={() => setOpen(false)}
        actions={
          <GoabButtonGroup alignment="end">
            <GoabxButton type="primary" onClick={() => setOpen(false)}>
              I understand
            </GoabxButton>
          </GoabButtonGroup>
        }
      >
        <p>
          You've selected to adjourn a matter that is required to appear today. This Calgary court
          location does not accept adjournment requests past 1PM MST. Please submit your
          adjournment request as soon as possible.
        </p>
      </GoabxModal>
  );
}

open = false;

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

<goabx-button type="secondary" (onClick)="toggleModal()">Save for later</goabx-button>
<goabx-modal
  [open]="open"
  calloutVariant="important"
  (onClose)="toggleModal()"
  heading="Complete submission prior to 1PM"
  [actions]="actions">
  <p>
    You've selected to adjourn a matter that is required to appear today. This Calgary court
    location does not accept adjournment requests past 1PM MST. Please submit your adjournment
    request as soon as possible.
  </p>
  <ng-template #actions>
    <goab-button-group alignment="end">
      <goabx-button type="primary" (onClick)="toggleModal()">I understand</goabx-button>
    </goab-button-group>
  </ng-template>
</goabx-modal>

const modal = document.getElementById("deadline-modal");
const openBtn = document.getElementById("open-modal-btn");
const understandBtn = document.getElementById("understand-btn");

openBtn.addEventListener("_click", () => {
  modal.setAttribute("open", "true");
});

understandBtn.addEventListener("_click", () => {
  modal.removeAttribute("open");
});

modal.addEventListener("_close", () => {
  modal.removeAttribute("open");
});

<goa-button version="2" type="secondary" id="open-modal-btn">Save for later</goa-button>
<goa-modal version="2"
  id="deadline-modal"
  calloutvariant="important"
  heading="Complete submission prior to 1PM">
  You've selected to adjourn a matter that is required to appear today. This Calgary court
  location does not accept adjournment requests past 1PM MST. Please submit your adjournment
  request as soon as possible.
  <div slot="actions">
    <goa-button-group alignment="end">
      <goa-button version="2" type="primary" size="compact" id="understand-btn">I understand</goa-button>
    </goa-button-group>
  </div>
</goa-modal>