Toasts

Utility

Simple notifications utilizing a dynamic queue system.

@skeletonlabs/skeleton
Source Code
View Page Source

Examples

Getting Started

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.

html 
<Toast />

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.

typescript 
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')
		}
		// Optional: Set a callback method
		callback: (response) => console.log(response)
	};
	toastStore.trigger(t);
}

Clear

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

typescript 
toastStore.clear();

Debug

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

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

Styling

Backgrounds

You can directly control the background styling for each toasting using background.. This accepts utility classes and variant styles.

typescript 
const t: ToastSettings = {
	message: 'This message will have a colorful background.',
	// Provide any background class
	preset: 'variant-filled-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.

typescript 
const t: ToastSettings = {
	message: 'This message will have a colorful background.',
	background: 'bg-gradient-to-tr from-indigo-500 via-purple-500 to-pink-500 text-white',
	// Add your custom classes here:
	classes: 'border-token border-purple-500'
};

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