Utility

Modals

High priority dialogs and modals using a dynamic queue system.

typescript 
import { Modal, getModalStore } from '@skeletonlabs/skeleton';
import type { ModalSettings, ModalComponent, ModalStore } from '@skeletonlabs/skeleton';
Source Page Source WAI-ARIA Transitions

Demo

Prerequisites

Initialize Stores

Implement the following in the root layout of your application. This is required only once when implementing Skeleton's Drawer, Modal, and Toast stores and will prevent known issues with SvelteKit SSR.

typescript 
import { initializeStores } from '@skeletonlabs/skeleton';

initializeStores();

Modal Component

Implement a single instance of the modal component in your app's root layout, above the App Shell (if present).

html 
<Modal />

<!-- <AppShell>...</AppShell> -->

Modal Store

When you wish to trigger a modal, import the getModalStore function and invoke it to retrieve the modalStore, which is a Svelte store that acts as the modal queue.

NOTE: To retrieve the store, getModalStore must be invoked at the top level of your component!
typescript 
import { getModalStore } from '@skeletonlabs/skeleton';
			
const modalStore = getModalStore();

Trigger

The title, body, and image are available to all modals.

Close

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

typescript 
modalStore.close();

Clear

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

typescript 
modalStore.clear();

Modal Settings

Define settings per modal instance via the trigger() method. These are similar to modal properties, but do not provide the same breadth of options.

typescript 
const modal: ModalSettings = {

	// Provide arbitrary classes to the backdrop and modal elements:
	backdropClasses: '!bg-green-500',
	modalClasses: '!bg-red-500',

	// Provide arbitrary metadata to your modal instance:
	meta: { foo: 'bar', fizz: 'buzz', fn: myCustomFunction }

};

Modal Properties

Define global settings for all modal instances. Tap the "Props" tab at the top of the page for a full list of options.

Async Response

You may await a modal response by wrapping it in a Javascript Promise, which resolves when the response is triggered.

typescript 
new Promise<boolean>((resolve) => {
	const modal: ModalSettings = {
		type: 'confirm',
		title: 'Please Confirm',
		body: 'Are you sure you wish to proceed?',
		response: (r: boolean) => {
			resolve(r);
		}
	};
	modalStore.trigger(modal);
}).then((r: any) => {
	console.log('resolved response:', r);
});

Component Modals

Advanced

Skeleton allows you to generate custom modals using Svelte components.

Example Modals

Choose a Method

This will create a set of reusable custom modals that are globally available to your application. Add the following to your your root layout in /src/routes/+layout.svelte.

typescript 
import ModalComponentOne from '/example/path/here';
import ModalComponentTwo from '/example/path/here';

const modalRegistry: Record<string, ModalComponent> = {
	// Set a unique modal ID, then pass the component reference
	modalComponentOne: { ref: ModalComponentOne },
	modalComponentTwo: { ref: ModalComponentTwo },
	// ...
};

Provide the modalRegistry to the modal component, which also resides in your root layout.

html 
<Modal components={modalRegistry} />

Then, when triggering a new component, set the value of component to the unique modal ID as registered above.

typescript 
const modal: ModalSettings = {
	type: 'component',
	component: 'modalComponentOne',
};
modalStore.trigger(modal);

Creating a Component

Learn more about how to construct a custom modal component using the tips below.

When creating a custom component, make sure to import the modal store. This should occur before all following steps.

typescript 
import { getModalStore } from '@skeletonlabs/skeleton';

const modalStore = getModalStore();

Accessibility

Skeleton does not provide a means to disable the backdrop's click to close feature, as this would be harmful to accessibility. View the ARIA APG guidelines to learn more about modal accessibility.