Modals

Utility

High priority dialogs and modals using a dynamic queue system.

@skeletonlabs/skeleton
Source Code
View Page Source
Accessibility Reference

Examples

Basic Modals

Component Modals

Getting Started

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

html 
<Modal />

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

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

typescript 
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.

typescript 
modalStore.close();

Clear

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

typescript 
modalStore.clear();

Debugging the Queue

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

html 
<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.

typescript 
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.

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

Component Modals

Advanced

Use the following techniques to create custom modals using components.

Import custom components in your root layout, create a modal registry object, then pass this object to the Modal components property.

typescript 
// 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 },
	// ...
};
html 
<Modal components={modalComponentRegistry} />

When triggeing a component, pass component: string, where the value represents the registry object key.

typescript 
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