Skip to content
Svelte Modals

<Modals />

Renders the current stack of modals

Props

backdrop

Renders when at least 1 modal has been opened.

<Modals>
  {#snippet backdrop(modals)}
    <div class="backdrop" onclick={() => modals.close()}></div>
  {/snippet}
</Modals>

Renders each modal component in the stack

<Modals>
  {#snippet modal(modal, modals)}
    <modal.component {...modal.props} />
  {/snippet}
</Modals>

loading

Renders when a modal has been opened via dynamic import and is fetching.

<Modals>
  {#snippet loading()}
    <LoadingSpinner />
  {/snippet}
</Modals>