<script>
  let showModal = false;
</script>

<Button onclick={() => showModal = true}>
  Show
</Button>
<Modal bind:active={showModal}
       title="Modal Title"
       subTitle="Modal Subtitle">
  <p>Hey!</p>
  <p>Here is the modal content</p>
</Modal>

<script>
  function showProgrammaticModal() {
    const modal = Modal.open({ title: 'Hello' })
    // Close programmatically
    setTimeout(modal.close, 2000)
  }
</script>

<Button onclick={showProgrammaticModal}>
  Show
</Button>

<script>
  let showRich = false;
</script>

<Button onclick={() => showRich = true}>
  Show
</Button>
<Modal bind:active={showRich} class="w-sm">
  {#snippet title()}
    Custom <em>title</em>
  {/snippet}
  {#snippet subTitle()}
    With a subtitle
  {/snippet}
  <p>Hey!</p>
</Modal>