This repo provides a simple Toast component for SvelteKit. A simple $state rune provides a queue into which toast content is assigned. An $effect rune in the Toast component (which changes no state) displays the toast.

Builds used

• Svelte 5.54
• Sveltekit 2.50.2

The toast-installation.md for installation instructions.

Toast Component Usage

The toast system has three parts: the Toast component, the toastStore, and the EmailToastCargo type.

1. Mount the component once in your layout

Add <Toast /> to your root layout so it is available across all pages. It renders as a native popover and manages its own visibility.

<!-- src/routes/+layout.svelte -->
<script>
  import Toast from '$lib/components/Toast.svelte';
</script>

{@render children()}
<Toast />

2. Define your toast payload

Each toast requires an EmailToastCargo object with four fields:

import type { EmailToastCargo } from '$lib/actionTypes';

const cargo: EmailToastCargo = {
  title: 'Download link on its way',      // Displayed as the toast heading
  message: 'A link was emailed to you.', // Displayed as the toast body
  email: '[email protected]',             // The email address involved
  persona: 'DOWNLOAD'                    // 'DOWNLOAD' | 'CONTACT_US'
};

3. Trigger a toast

Import toastStore and call toastStore.add(cargo) from any page or component:

<script>
  import { toastStore } from '$lib/toastStore.svelte';
  import type { EmailToastCargo } from '$lib/actionTypes';

  const cargo: EmailToastCargo = { ... };

  function showToast() {
    toastStore.add(cargo);
  }
</script>

<button onclick={showToast}>Notify me</button>

Behavior

Adding a new persona

To support a new toast category, add a value to the ToastPersona union in src/lib/actionTypes.ts:

export type ToastPersona = 'DOWNLOAD' | 'CONTACT_US' | 'YOUR_NEW_TYPE';