Svelte Daisy Toaster

🚀 Quick Start Guide

1. Installation

pnpm add svelte-daisy-toaster

2. Configuration (src/app.css)

@import 'tailwindcss';
@plugin "daisyui"; /* Load DaisyUI plugin */

/* Tell Tailwind to scan toaster components for classes */
@source "../node_modules/svelte-daisy-toaster/dist";

3. Setup root layout (+layout.svelte)

import { Toaster } from 'svelte-daisy-toaster';

<Toaster />

4. Use anywhere

import { toast } from 'svelte-daisy-toaster';

toast.success('Hello World!');

01 Stack Mode

<!-- Add 'stack' prop to your Toaster component -->
<Toaster stack={true} />

Enable Stack Mode

02 Basic Toast Types

// Simple usage
toast('Default message');
toast.success('Success message');
toast.error('Error message');
toast.warning('Warning message');
toast.info('Info message');

// With title
toast.success('Your changes have been saved!', {
  title: 'Success'
});

// Loading flow
const t = toast.loading('Loading...');
// ... do work ...
t.success('Done!');

03 Toast Positions

toast('Top Center', { position: 'top-center' });
toast('Bottom Center', { position: 'bottom-center' });

04 Toast Styles

toast.success('Outline style', { style: 'outline' });
toast.warning('Dash style', { style: 'dash' });
toast.info('Soft style', { style: 'soft' });

05 Advanced Features

Action Button

const t = toast('Message deleted', {
  button: {
    text: 'Undo',
    callback: () => t.info('Deletion undone', { button: undefined })
  }
});

Close Button

toast('Click the X to close', {
  showCloseButton: true
});

Custom Classes

toast('Translucent style', {
  customClass: 'bg-primary/20 backdrop-blur-md text-primary'
});

06 Message Layout

Long message

Generates a random long message each time to show wrapping inside the toast width limit.

Multiline message

Shows newline rendering with \n.

Custom maxWidth

Shows a narrower toast by setting maxWidth: 280.

Options / API Reference

Toast Options

Option	Type	Default	Description
`message`	`string`	`undefined`	Toast message content. Supports multiline text with `\n`.
`title`	`string`	`undefined`	Title displayed above the message
`position`	`ToastPosition`	`'top-right'`	Position of the toast on screen
`durationMs`	`number`	`4000`	Duration in milliseconds before auto-dismiss
`style`	`'outline' \| 'dash' \| 'soft'`	`undefined`	Visual style variant of the toast
`showCloseButton`	`boolean`	`false`	Show close button on the toast
`minWidth`	`number`	`250`	Minimum toast width in pixels. Inherits from the Toaster by default.
`maxWidth`	`number`	`420`	Maximum toast width in pixels. Inherits from the Toaster by default.
`customClass`	`string`	`undefined`	Custom CSS classes to apply
`button`	`ButtonConfig`	`undefined`	Action button configuration

Toaster Component Props

Prop	Type	Default	Description
`stack`	`boolean`	`false`	Enable stacked toast display mode
`minWidth`	`number`	`250`	Default minimum width for all toasts in pixels
`maxWidth`	`number`	`420`	Default maximum width for all toasts in pixels

Toast Methods

Method	Description
`toast(message, options?)`	Show a default toast with message
`toast(options)`	Show a toast with options object (message inside options)
`toast.success(message, options?)`	Show a success toast
`toast.error(message, options?)`	Show an error toast
`toast.warning(message, options?)`	Show a warning toast
`toast.info(message, options?)`	Show an info toast
`toast.loading(message, options?)`	Show a loading toast (returns controller)

Toast Controller Methods

Methods available on the returned toast controller (e.g., from toast.loading())

Method	Description
`t.update(options)`	Update the toast with new options
`t.dismiss()`	Dismiss the toast manually
`t.success(message, options?)`	Update toast to success state
`t.error(message, options?)`	Update toast to error state
`t.warning(message, options?)`	Update toast to warning state
`t.info(message, options?)`	Update toast to info state

const t = toast.loading('Processing...', { position: 'bottom-center' });

// later
t.update({ message: 'Almost done...' });

// or
t.dismiss();

Position Values

top-left top-center top-right bottom-left bottom-center bottom-right

Default: top-right

Button Configuration

interface ButtonConfig {
  text: string;           // Button label
  class?: string;         // Custom CSS classes
  callback: (toast) => void; // Click handler
}