Utility

Modals

High priority dialogs and modals using a dynamic queue system.

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

Demo

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 modalStore, which acts as the modal queue.

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

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

These additional settings are available to all modals.

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 }

};

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

To create custom modals, generate a new component, then pass this to the Modal system.

See the additional information below to learn how to use custom component modals.

Import and use the modalStore. All provided data is available within your component via $modalStore[0].

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.

SvelteKit SSR Warning

There are known security risks when using Svelte writable stores within SvelteKit load functions.

Details →