svelte5-toaster

A lightweight, customizable toast notification library for Svelte 5

Quickstart

Installation

npm install svelte5-toaster

Basic Setup

Add the Toaster component to your root layout and use the toast API anywhere.

+layout.svelte

<script>
  import { Toaster } from 'svelte5-toaster'
</script>

<Toaster />
<slot />

+page.svelte

<script>
  import { toast } from 'svelte5-toaster'
</script>

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

Toast Types

Six built-in toast types with appropriate icons and styling.

toast.default('This is a default toast')

toast.success('Successfully saved!')

toast.error('Something went wrong')

toast.warning('Please review your input')

toast.info('New update available')

toast.loading('Loading data...')

Toast Options

Customize toasts with descriptions, durations, and more.

With Description

toast.success('File uploaded', {
  description: 'Your file has been uploaded successfully.'
})

Custom Duration

Default is 4000ms. Set to Infinity for persistent toasts.

toast.info('This stays for 10 seconds', {
  duration: 10000
})

Patterns

Loading → Result

Show a loading toast, then update it to success/error by reusing the ID.

const id = toast.loading('Saving changes...')

// After async operation completes
toast.success('Changes saved!', { id })
// or
toast.error('Failed to save', { id })

Programmatic Dismiss

// Dismiss by ID
const id = toast.loading('Processing...')
toast.dismiss(id)

// Dismiss all
toast.dismissAll()

Toaster Configuration

Customize the Toaster component with these props. Try them out below!

<Toaster
  position="top-right"  // Position on screen
  theme="light"         // 'light' | 'dark'
  variant="rich"        // 'rich' | 'minimal'
  stack="vertical"      // 'vertical' | 'collapsed'
  max={5}               // Maximum toasts (oldest removed)
/>

Position

Theme

Variant

Stack

Current: <Toaster position="top-right" theme="light" variant="rich" stack="vertical" />

API Reference

Toast Functions

Function	Description
`toast.default(title, options?)`	Show a default toast
`toast.success(title, options?)`	Show a success toast
`toast.error(title, options?)`	Show an error toast
`toast.warning(title, options?)`	Show a warning toast
`toast.info(title, options?)`	Show an info toast
`toast.loading(title, options?)`	Show a loading toast (infinite duration)
`toast.dismiss(id)`	Dismiss a specific toast by ID
`toast.dismissAll()`	Dismiss all toasts

Toast Options

Option	Type	Description
`id`	string	Custom ID (useful for updating toasts)
`description`	string	Secondary text below the title
`duration`	number	Auto-dismiss delay in ms (default: 4000)
`icon`	Component	Custom Svelte component for icon

Toaster Props

Prop	Type	Default	Description
`position`	ToastPosition	'top-right'	Screen position
`theme`	'light' \| 'dark'	'light'	Color theme
`variant`	'rich' \| 'minimal'	'rich'	Visual style
`stack`	'vertical' \| 'collapsed'	'vertical'	Stacking behavior
`max`	number	5	Maximum toasts (oldest removed)

CSS Customization

Override CSS variables to customize the appearance.

:root {
  --svt-font-family: system-ui, sans-serif;
  --svt-border-radius: 8px;
  --svt-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  --svt-padding: 12px 16px;
  --svt-gap: 12px;
  --svt-z-index: 9999;
  --svt-max-width: 360px;
  --svt-min-width: 280px;

  /* Colors */
  --svt-bg: #ffffff;
  --svt-color: #1a1a1a;
  --svt-border: #e5e5e5;
  --svt-success-bg: #ecfdf5;
  --svt-success-color: #065f46;
  /* ... and more */
}