Toasts

Prerequisites

Initialize Stores

Implement the following in the root layout of your application. This is required only once when implementing Skeleton's Drawer, Modal, and Toast stores and will prevent known issues with SvelteKit SSR.

import { initializeStores, Toast } from '@skeletonlabs/skeleton';

initializeStores();

Toast Component

Implement a single instance of the toast component in your app's root layout, above the App Shell (if present).

<Toast />

<!-- <AppShell>...</AppShell> -->

We'll cover triggering this feature on-demand in the documentation below.

Toast Store

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

NOTE: To retrieve the store, getToastStore must be invoked at the top level of your component!

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

const toastStore = getToastStore();

Trigger

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

Timing

Use the following setting to adjust the toast timing.

Dismiss

Use the hideDismiss option to disable the dismiss button. When using this setting autohide option enabled by default.

Hover State

Use the hoverable option to keep the toast visible while hovering with a mouse cursor.

Clear

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

toastStore.clear();

Programmatic

Create a reference for your toast so that you may programmatically close it on demand.

Styling

We recommend applying global styles via the Toast component props. However, you may also 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.

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