Toasts

Import and add a single instance of the Toast component in your app's root layout. We recommend only adding this ONCE per app since it exists in global scope.

<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'
};