Modals

Import and add a single instance of the Modal component in your app's root layout. We recommend only adding this ONCE per app since it exists in global scope.

<Modal />

Modal Store

When you wish to trigger a modal, import the modalStore, which acts as the modal queue.

import { modalStore } from '@skeletonlabs/skeleton';

Trigger

Note that title, body, and image are optional for all modal types.

function triggerAlert(): void {
	const alert: ModalSettings = {
		type: 'alert',
		title: 'Example Alert',
		body: 'This is an example modal.',
		image: 'https://i.imgur.com/WOgTG96.gif'
	};
	modalStore.trigger(alert);
}

Close

Trigger the close() method to remove the first modal in the modal queue.

modalStore.close();

Clear

Trigger the clear() method completely empty the modal queue.

modalStore.clear();

Debugging the Queue

Use the following technique to visualize the contents of the store for debugging.

<pre>queue: {JSON.stringify($modalStore, null, 2)}</pre>

Customizing Modals

To customize an individual modal, append classes and provide the classes you wish to be applied to the modal window.

const d: ModalSettings = {
	type: 'alert',
	// ...
	classes: '!p-0 !bg-green-500 !max-w-[75%]'
};

Note that ! (important) may be required to override some styles.

You can create a custom modal by passing a ModalComponent object, which includes any Svelte component.

// import MyCustomComponent from '...';

function triggerCustomModal(): void {
	const modalComponent: ModalComponent = {
		// Pass a reference to your custom component
		ref: MyCustomComponent,
		// Add your props as key/value pairs
		props: { background: 'bg-red-500' },
		// Provide default slot content as a template literal
		slot: '<p>Skeleton</p>'
	};
	const d: ModalSettings = {
		type: 'component',
		component: modalComponent
		// NOTE: title, body, response, etc are supported!
	};
	modalStore.trigger(d);
}

When constructing custom modals, you are responsible for implementing close/submit buttons, as well as triggering the response method as needed. To make this process easier to understand, we have provided a few examples to demonstrate the process.

Below are a few tips and recommendations for custom modals:

• Import and use the modalStore to interface directly with the active modal queue. $modalStore[0] is the visible modal index.
• Parent props are available via parent - ex: parent.background will provide the background color prop.
• You can inspect the full list of available parent prop values in the source code.
• Use the parent.onClose() or modalStore.close() methods to close the modal.
• Use the $modalStore[0].response('myResponseDataHere'); method to return a response value.