Toast

Feedback

Stack-aware notification toasts with FLIP reflow animation. Place the Toast container once in your layout and trigger notifications from anywhere via toastStore.

Import

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

Setup

Add <Toast /> once to your root layout. This renders the fixed overlay that displays all notifications.

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

Usage

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

svelte 
<!-- Trigger from anywhere -->
<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, and info.

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

Custom Duration

Pass a third argument to override the default 2500 ms display time.

ts 
// Custom duration (ms) — default is 2500
toastStore.show('Quick flash', 'success', 1000);
toastStore.show('Long message', 'info', 5000);

Stacking

Toasts stack automatically with smooth FLIP reflow animation when multiple are shown in sequence.

ts 
// Show multiple toasts — they stack with FLIP animation
toastStore.show('First toast');
setTimeout(() => toastStore.show('Second toast', 'success'), 300);
setTimeout(() => toastStore.show('Third toast', 'error'), 600);

Programmatic Dismiss

Call toastStore.dismiss(id) to remove a specific toast before it expires. show() returns the toast's numeric id.

ts 
// Dismiss a specific toast by id
const id = toastStore.show('Processing…');
// ...later
toastStore.dismiss(id);

Variant Reference

default
Neutral notification. Uses the card background.
success
Positive outcome — saved, uploaded, completed.
error
Failure or destructive action — delete failed, error occurred.
info
Informational message — new message, status update.

Store API

Import toastStore from '$lib/stores/toast.svelte' to trigger toasts from any component.

show (message: string, variant?: ToastVariant, duration?: number) => void Display a new toast. variant defaults to 'default', duration defaults to 2500 ms.
dismiss (id: number) => void Immediately remove a toast by its id.
toasts ToastItem[] Reactive array of active toasts. Read by Toast.svelte to render.

Toast Component Props

PropTypeDefaultDescription
— ——The Toast component takes no props. It renders the fixed overlay container and reads directly from toastStore.