Toast

Feedback

Stack-aware notification toasts with 6 animation styles. Place <Toast /> once in your root layout and trigger from anywhere via toastStore.

Import

ts 
import { toastStore } from '$lib/stores/toast.svelte';

Setup

Add <Toast /> once to your root layout.

svelte 
<!-- Add once to your root layout (+layout.svelte) -->
<Toast />

Usage

Call toastStore.show() from any component — no prop drilling needed.

svelte 
<script lang="ts">
  import { toastStore } from '$lib/stores/toast.svelte';
</script>

<button onclick={() => toastStore.show('Hello!')}>Show toast</button>

Variants

Four built-in variants: default, success, error, info.

ts 
toastStore.show('Saved successfully', 'success');
toastStore.show('Something went wrong', 'error');
toastStore.show('New message received', 'info');
toastStore.show('Completed action', 'accent');
toastStore.show('Default notification');

Animations

Pass a 4th argument to choose the entrance animation. Click each to preview.

ts 
// 4th argument controls the entrance animation
toastStore.show('Hello!', 'success', 2500, 'slide');
toastStore.show('Hello!', 'success', 2500, 'bounce');
toastStore.show('Hello!', 'success', 2500, 'zoom');
toastStore.show('Hello!', 'success', 2500, 'elastic');
toastStore.show('Hello!', 'success', 2500, 'flip');
toastStore.show('Hello!', 'success', 2500, 'fade');

Stacking

Toasts stack automatically with FLIP reflow when multiple are shown.

ts 
toastStore.show('First toast');
setTimeout(() => toastStore.show('Second toast', 'success'), 300);
setTimeout(() => toastStore.show('Third toast', 'error'), 600);

Duration

Third argument overrides the 2500 ms default display time.

ts 
toastStore.show('Quick flash', 'success', 1000);
toastStore.show('Long message', 'info', 5000);

Programmatic Dismiss

show() returns a numeric id. Pass it to dismiss() to remove early.

ts 
const id = toastStore.show('Processing…');
toastStore.dismiss(id);

Store API

show (message, variant?, duration?, animation?) => void Show a toast. variant defaults to 'default', duration to 2500 ms, animation to 'slide'.
dismiss (id: number) => void Remove a toast by id before it expires.
toasts ToastItem[] Reactive array of active toasts, read by Toast.svelte.

Toast Props

PropTypeDefaultDescription
— ——Toast takes no props. Place it once in your root layout — it renders the fixed overlay and reads from toastStore.