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: Presets for primary | secondary | tertiary | warning
		preset: 'primary',
		// 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>

Styling

Presets

We provide a quick set of preset styles for any theme colors. The success preset is always green, while error is always red.

const t: ToastSettings = {
	message: 'This message will have a colorful background.',
	// Available presets include:
	// primary | secondary | tertiary | warning | success | error
	preset: 'warning',
};

Custom Styles

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-gradient-to-tr from-indigo-500 via-purple-500 to-pink-500 text-white'
};

SvelteKit SSR Warning

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.