Toasts

Setup the Provider

Wrap the contents of your app with ToastProvider in your root layout. We’ll interface with this using the Svelte Context API.

<script lang="ts">
  import { ToastProvider } from '@skeletonlabs/skeleton-svelte';
</script>

<ToastProvider>
  {@render children()}
</ToastProvider>

Create a Toast

There are three available types of toasts: info | error | success, with info being the default.

<script lang="ts">
	import { getContext } from 'svelte';
	import { type ToastContext } from '@skeletonlabs/skeleton-svelte';

	export const toast: ToastContext = getContext('toast');

	function triggerInfo() {
		toast.create({ description: 'Hello World! 👋' });
	}

	function triggerError() {
		toast.create({
			title: 'Error',
			description: 'Uh oh, something went wrong.',
			type: 'error'
		});
	}

	function triggerSuccess() {
		toast.create({
			title: 'Success',
			description: 'The task was was completed successfully!',
			type: 'success'
		});
	}
</script>

<div class="flex gap-4">
	<button class="btn preset-tonal" onclick={triggerInfo}>Toast: Info</button>
	<button class="btn preset-tonal" onclick={triggerError}>Toast: Error</button>
	<button class="btn preset-tonal" onclick={triggerSuccess}>Toast: Success</button>
</div>

API Reference

ToastProvider

The list of available component props.

• placement?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'; (default bottom-end)
• offset?: string; - Offset from the viewport edge. (default: 16px)
• dismissLabel?: string; - The dismiss button label text. (default ×)

Toast

Supply these values within toast.create().

• title?: string; - The unique toast title text.
• description: string; - The unique toast description text.
• type?: 'info' | 'error' | 'success'; - Define the toast type. (default info)
• duration?: number; - The duration of the toast. Default varies by type.