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

Positioning

Skeleton takes an opinionated stance on positioning, preferring to keep toast notifications in fixed location on your page. This position can be modified globally the position property on the Toast component. However, we do not allow you to modify this per toast instance as we feel this would provide inconsistent UX.

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 →