Toasts

Import and add a single instance of the Toast component in your app's root layout. Since this is in global scope it will be possible to reuse this feature throughout your entire application.

<Toast />

Toast Store

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

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

Trigger

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

function triggerToast(): void {
	const t: ToastSettings = {
		message: '👋 Hello and welcome to Skeleton.'
		// Optional: The auto-hide settings
		autohide: true,
		timeout: 5000,
		// Optional: Adds a custom action button
		action: {
			label: 'Greeting',
			response: () => alert('Hello, Skeleton')
		}
	};
	toastStore.trigger(t);
}

Clear

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

toastStore.clear();

Debug

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

<pre>queue: {JSON.stringify($toastStore, null, 2)}</pre>

Styled

To customize an individual toast, append classes to your settings and add CSS classes you wish to be applied to the toast.

const t: ToastSettings = {
	message: 'This message will have a colorful background.',
	// Add your custom classes here:
	classes: 'bg-warning-500 text-on-warning-token'
};

SvelteKit and SSR Warning

If you're building a SvelteKit project please be aware that there are known issues when using Svelte stores with SSR, such as our toast store. To prevent these issues please avoid the use of the toast store within any SvelteKit Load function. Likewise, if you need a toast to open on route initilization we advise triggering the open() method after the SvelteKit Browser environment context is available.

import { browser } from '$app/environment';

if (browser) toastStore.trigger({...});

For additional context please see this thread.