<script>
  import Modal from 'sv-bootstrap-modal';
  let isOpen = $state(false);
</script>

<button class="btn btn-primary" onclick={() => (isOpen = true)}
  >Open Modal</button
>

<Modal bind:open={isOpen}>
  <div class="modal-header">
    <h5 class="modal-title">Modal title</h5>
    <button type="button" class="btn-close" onclick={() => (isOpen = false)}
    ></button>
  </div>
  <div class="modal-body">Modal body text.</div>
  <div class="modal-footer">
    <button
      type="button"
      class="btn btn-secondary"
      onclick={() => (isOpen = false)}>Close</button
    >
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</Modal>

<Modal bind:open={isOpen} dialogClasses="modal-lg">...</Modal>

<Modal bind:open={isOpen} dialogClasses="modal-dialog-centered">...</Modal>

<Modal bind:open={isOpen} dialogClasses="modal-dialog-scrollable">...</Modal>

<Modal bind:open={isOpen} animated={false}>...</Modal>