Utility

Toasts

Simple notifications utilizing a dynamic queue system.

typescript 
import { Toast, toastStore } from '@skeletonlabs/skeleton';
import type { ToastSettings } from '@skeletonlabs/skeleton';
Source Page Source

Demo

Toast Store

The Modal Store acts as a queue for your toast messages.

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

Trigger

To add a message to the queue, use the toastStore.trigger() method and pass a toast settings object.

Clear

Use toastStore.clear() to clear the entire toast store queue.

typescript 
toastStore.clear();

Styling

We recommend applying global styles via the Toast component props. Though you can provide styles per toast instance.

Backgrounds

Custom Styles

Callbacks

You can optionally add a callback function to your ToastSettings to receive the unique ID assigned to each toast, as well as listen for when the queued and closed lifecycle events occur for that toast message.

typescript 
const t: ToastSettings = {
	// ...
	callback: (response) => {
		console.log(response.id);
		if (response.status === 'queued') console.log('Toast was queued!');
		if (response.status === 'closed') console.log('Toast was closed!');
	}
};

SvelteKit SSR Warning

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

Details →