How to Create Toast Notifications in Svelte Easily

To create a toast in Svelte, use a writable store to manage toast messages and display them with a component that uses Svelte's transition for smooth appearance and disappearance. Update the store to show or hide toast notifications dynamically.

Syntax

Creating a toast in Svelte involves three main parts:

• Store: A writable store holds the toast message and visibility state.
• Toast Component: Displays the message and uses transition for fade effects.
• Trigger: A function or event that updates the store to show the toast.

svelte

import { writable } from 'svelte/store';
import { fade } from 'svelte/transition';

// Store to hold toast data
export const toast = writable({ message: '', visible: false });

// Function to show toast
export function showToast(message) {
  toast.set({ message, visible: true });
  setTimeout(() => toast.set({ message: '', visible: false }), 3000);
}

// Toast.svelte component
<script>
  import { toast } from './toastStore.js';
  import { fade } from 'svelte/transition';
  let $toast;
  toast.subscribe(value => $toast = value);
</script>

{#if $toast.visible}
  <div class="toast" transition:fade>
    {$toast.message}
  </div>
{/if}

Output

A small message box appears at the bottom or top of the screen with the toast message, fading in and out smoothly.

Example

This example shows a button that triggers a toast notification with a message that disappears after 3 seconds.

svelte

<script>
  import { writable } from 'svelte/store';
  import { fade } from 'svelte/transition';

  const toast = writable({ message: '', visible: false });

  function showToast(message) {
    toast.set({ message, visible: true });
    setTimeout(() => toast.set({ message: '', visible: false }), 3000);
  }
</script>

<style>
  .toast {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    font-weight: bold;
  }
</style>

<button on:click={() => showToast('Hello from Svelte toast!')}>Show Toast</button>

{#if $toast.visible}
  <div class="toast" transition:fade>
    {$toast.message}
  </div>
{/if}

Output

When clicking the button, a dark toast box with the text 'Hello from Svelte toast!' appears at the bottom center and fades out after 3 seconds.

Common Pitfalls

Common mistakes when creating toasts in Svelte include:

• Not using a store or reactive variable, causing the toast not to update properly.
• Forgetting to clear or hide the toast after a timeout, so it stays visible indefinitely.
• Not using transition effects, making the toast appear abruptly and less user-friendly.
• Placing the toast component outside the main app or not subscribing to the store correctly.

svelte

/* Wrong: Toast message set but never hidden */
<script>
  import { writable } from 'svelte/store';
  const toast = writable({ message: '', visible: false });
  function showToast(message) {
    toast.set({ message, visible: true });
    // Missing timeout to hide toast
  }
</script>

/* Right: Hide toast after 3 seconds */
<script>
  import { writable } from 'svelte/store';
  const toast = writable({ message: '', visible: false });
  function showToast(message) {
    toast.set({ message, visible: true });
    setTimeout(() => toast.set({ message: '', visible: false }), 3000);
  }
</script>

Quick Reference

Toast Creation Steps:

• Create a writable store for toast state.
• Make a toast component that subscribes to the store.
• Use Svelte's fade transition for smooth show/hide.
• Trigger toast by updating the store and auto-hide with setTimeout.

Step	Description
1	Create writable store for toast message and visibility
2	Build toast component that shows message when visible
3	Use fade transition for smooth appearance/disappearance
4	Trigger toast by setting store and auto-hide after delay

Key Takeaways

Use a writable store to manage toast message and visibility state in Svelte.

Display the toast conditionally with a component using Svelte's fade transition for smooth effects.

Always hide the toast after a timeout to avoid it staying visible forever.

Trigger toast notifications by updating the store from any part of your app.

Keep toast UI simple and accessible with clear positioning and readable text.