Modals

Import and add a single instance of the Modal component in your app's root layout.

<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',
		// Optionally override buttont text
		buttonTextCancel: 'Cancel'
	};
	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>

Modal Settings

Instance Classes

Use the backdropClasses or modalClasses settings to provide abitrary classes per component instance. Note that ! (important) may be required to override some styles.

const d: ModalSettings = {
	// ...
	backdropClasses: '!bg-green-500',
	modalClasses: '!bg-red-500',
};

Abitrary Metadata

You can pass abitrary metadata to your modal via the meta setting. All data types are supported.

const d: ModalSettings = {
	// ...
	meta: { foo: 'bar', fizz: 'buzz', fn: myCustomFunction }
};
modalStore.trigger(d);

Use the following techniques to create custom modals using components.

// import ModalComponentOne from '...';
// import ModalComponentTwo from '...';

const modalComponentRegistry: Record<string, ModalComponent> = {
	modalComponentOne: {
		// Pass a reference to your custom component
		ref: ModalComponentOne,
		// Add the component properties as key/value pairs
		props: { background: 'bg-red-500' },
		// Provide a template literal for the default component slot
		slot: '<p>Skeleton</p>'
	},
	modalComponentTwo: { ref: ModalComponentTwo },
	// ...
};

<Modal components={modalComponentRegistry} />

function triggerCustomModal(): void {
	const d: ModalSettings = {
		type: 'component',
		// The component registry reference key
		component: 'modalComponentOne',
	};
	modalStore.trigger(d);
}

Best Practices

• Import and use the modalStore to interface directly with the active modal queue.
• The visible modal uses index zero, ex: $modalStore[0].
• All data provided to ModalSettings is available via $modalStore[0] inside your component.
• The Modal component props are available via parent - ex: parent.background will provide the background property value.
• Tap the Props tab on this page to view a full list of parent props available.
• Use the $modalStore[0].response('myResponseDataHere'); method to return a response value.
• Use the parent.onClose() or modalStore.close() methods to close the modal.
• Abitrary metadata is available using $modalStore[0].meta?.someKey.

Examples

Accessibility

Skeleton does not provide a means to disable the backdrop's click to close feature, as we feel this would be harmful to accessability. We recommend viewing the ARIA guidelines if you wish to learn more about modal accessability.