Skip to content

modals

The main entry point for the modals API.

modals.open

Opens a modal. Returns a promise that resolves when the modal is closed. Value can be determined by the modal using its close(value) prop, otherwise it will resolve to undefined.

import { modals } from 'svelte-modals'
import MyModal from './MyModal.svelte'
const value = await modals.open(MyModal, props, options)
ParamTypeRequiredDescription
componentSvelteComponentYesYour Svelte modal component
propsanyNoProps for the modal
optionsobjectNo
options.idstringNoGives the modal an id, which can be used for closeById(id)
options.replacebooleanNoThis modal will replace the last modal in the stack

modals.close

Closes the current modal or last amount of modals in the stack. Returns true if the modal was closed, false if the modal prevented the close.

import { modals } from 'svelte-modals'
// Close the current modal
modals.close()
// Close the last 2 modals
modals.close(2)
ParamTypeRequiredDescription
amountnumberNoThe number of modals to close. Defaults to 1

modals.closeById

Closes a modal by its id.

import { modals } from 'svelte-modals'
modals.open(MyModal, {}, { id: 'my-modal' })
modals.closeById('my-modal')
ParamTypeRequiredDescription
idstringYesThe id of the modal to close

modals.closeAll

Closes all modals.

import { modals } from 'svelte-modals'
modals.closeAll()

modals.stack

Rune

An array of the current stack of modals.

modals.action

Rune

The last action that was performed on the modals stack (push or pop). This can be useful for animations.