Svelte Sonner

https://github.com/wobsoriano/svelte-sonner
Admin
Svelte Sonner is an opinionated toast component for Svelte, ported from Emil Kowalski's Sonner.
Tokens:25,973
Snippets:262
Trust Score:9.8
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install svelte-sonner

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Install the package using your preferred package manager.

```bash
npm i svelte-sonner
# or
yarn add svelte-sonner
# or
pnpm add svelte-sonner
```

--------------------------------

### Triggering a basic toast

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast.md

Example of triggering a standard toast with a description and custom duration.

```ts
import { toast } from 'svelte-sonner';

const id = toast('Event has been created', {
	description: 'Monday, January 3rd at 6:00pm',
	duration: 10000
});
```

--------------------------------

### Basic toast method usage

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast.md

Examples of calling success, error, info, and warning toast methods.

```ts
toast.success('Event has been created');
toast.error('Event has not been created');
toast.info('Be at the area 10 minutes before the event time');
toast.warning('Event start time cannot be earlier than 8am');
```

--------------------------------

### Icon component usage

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/icon.md

Example of importing and using the Icon component with different type props.

```svelte
<script lang="ts">
	import { Icon } from 'svelte-sonner';
</script>

<Icon type="success" />
<Icon type="error" />
```

--------------------------------

### Loader component usage

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/icon.md

Example of importing and using the Loader component with visibility and custom class props.

```svelte
<script lang="ts">
	import { Loader } from 'svelte-sonner';
</script>

<Loader visible class="my-spinner" />
```

--------------------------------

### useSonner usage example

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/use-sonner.md

Demonstrates how to use the useSonner hook within a Svelte component to reactively log active toasts. A Toaster component must be mounted in the tree.

```svelte
<script lang="ts">
	import { Toaster, useSonner } from 'svelte-sonner';

	const sonner = useSonner();

	// Reactive access to the toasts
	$effect(() => console.log(sonner.toasts));
</script>

<Toaster />
```

--------------------------------

### toast.dismiss usage

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast.md

Example showing how to dismiss a specific toast by ID or dismiss all active toasts.

```ts
const toastId = toast('Event has been created');
toast.dismiss(toastId); // dismiss one
toast.dismiss(); // dismiss all
```

--------------------------------

### toast.promise with data callbacks

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast.md

Example of using toast.promise with fetch and callbacks to handle response data or errors.

```ts
toast.promise(fetch('/api/user'), {
	loading: 'Fetching user…',
	success: (data) => `${data.name} has been added!`,
	error: (err) => `Request failed: ${err.message}`
});
```

--------------------------------

### Promise toast

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Starts in a loading state and updates automatically after the promise resolves or fails.

```js
toast.promise(() => new Promise((resolve) => setTimeout(resolve, 2000)), {
	loading: 'Loading',
	success: 'Success',
	error: 'Error'
});
```

--------------------------------

### Displaying toasts with useSonner

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/use-sonner.md

Example of iterating over the reactive toasts array provided by the useSonner hook in a Svelte template.

```svelte
<script lang="ts">
	import { useSonner } from 'svelte-sonner';

	const sonner = useSonner();
</script>

{#each sonner.toasts as t (t.id)}
	<div>Toast {t.id}: {t.title} ({t.type})</div>
{/each}
```

--------------------------------

### Updating an existing toast

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast.md

Example of updating a previously triggered toast by reusing its ID.

```ts
const toastId = toast('Sonner');
toast.success('Toast has been updated', { id: toastId });
```

--------------------------------

### Retrieve and log active toasts

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast.md

Example usage of getActiveToasts to retrieve a snapshot of current non-dismissed toasts and log their properties.

```ts
const active = toast.getActiveToasts();
console.log(active.map((t) => ({ id: t.id, type: t.type, title: t.title })));
```

--------------------------------

### toast.success(message, options?)

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Creates a success toast with a checkmark icon.

```APIDOC
## toast.success(message, options?)

### Description
Displays a success toast notification, typically used to confirm a successful operation.
```

--------------------------------

### toast.info(message, options?)

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Creates an info toast with a question mark icon.

```APIDOC
## toast.info(message, options?)

### Description
Displays an informational toast notification.
```

--------------------------------

### Define multiple toasters

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toaster.md

Shows how to define multiple Toaster instances with unique IDs.

```svelte
<Toaster />
<Toaster id="top" position="top-center" />
```

--------------------------------

### Default toast with custom icon and description

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Customize the toast by passing an options object as the second argument.

```js
import Icon from './Icon.svelte';

toast('Event has been created', {
	description: 'Monday, January 3rd at 6:00pm',
	icon: Icon
});
```

--------------------------------

### toast.warning(message, options?)

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Creates a warning toast with a warning icon.

```APIDOC
## toast.warning(message, options?)

### Description
Displays a warning toast notification to alert the user.
```

--------------------------------

### toast.custom

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Renders an unstyled toast with a custom component while maintaining library functionality.

```APIDOC
## toast.custom(component)

### Description
Displays a custom Svelte component as a toast notification.

### Parameters
- **component** (Component) - Required - The Svelte component to render.
```

--------------------------------

### Importing toastState

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast-state.md

Import the singleton instance of the ToastState class.

```ts
import { toastState, ToastState /* not exported — class is module-private */ } from 'svelte-sonner';
```

--------------------------------

### Runed Contexts

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/internal.md

Svelte-5-compatible context primitives for managing rich colors and toaster state.

```ts
import { SonnerState } from '$lib/toast-state.svelte.js';
import { Context } from 'runed';

export const richColorsContext = new Context<{ setRichColors: (value: boolean) => void }>(
	'richColorsContext'
);

export const sonnerContext = new Context<SonnerState>('<Toaster/>');
```

--------------------------------

### Success toast

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Renders a checkmark icon in front of the message.

```js
toast.success('Event has been created');
```

--------------------------------

### Enable expanded toasts

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Use the expand prop to show multiple toasts at once, and set visibleToasts to control the maximum count.

```svelte
<Toaster expand visibleToasts={9} />
```

--------------------------------

### toast.promise(promise, options)

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Creates a toast that tracks the state of a promise.

```APIDOC
## toast.promise(promise, options)

### Description
Displays a toast that starts in a loading state and updates automatically based on the promise resolution or rejection.

### Parameters
- **promise** (function) - Required - A function returning a Promise.
- **options** (object) - Required - Contains `loading`, `success`, and `error` messages or functions.
```

--------------------------------

### Default toast

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

The most basic toast implementation.

```js
toast('Event has been created');
```

--------------------------------

### toast.custom

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast.md

Triggers a headless, unstyled custom component toast.

```APIDOC
## toast.custom(component, data?)

### Description
Triggers a custom toast notification using a Svelte component. The component is rendered unstyled and receives a `closeToast` prop to handle manual dismissal.

### Parameters
- **component** (AnyComponent) - Required - The Svelte component to render.
- **data** (ExternalToast<T>) - Optional - Options; `componentProps` are forwarded to the component.

### Returns
- **id** (string | number) - The unique identifier for the toast.

### Example
```ts
toast.custom(HeadlessToast, {
	componentProps: { eventName: 'Louvre Museum' }
});
```
```

--------------------------------

### Enable rich colors

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Use the richColors prop to apply color schemes based on the toast state (e.g., success, error).

```svelte
<Toaster richColors />
```

--------------------------------

### Package exports configuration in package.json

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/index.md

Defines the entry points and module resolution for the svelte-sonner package.

```json
"exports": {
	".": {
		"types": "./dist/index.d.ts",
		"svelte": "./dist/index.js",
		"import": "./dist/index.js"
	}
},
"svelte": "./dist/index.js",
"types": "./dist/index.d.ts",
"type": "module"
```

--------------------------------

### Configure Vite for SvelteKit SSR

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

If you encounter 'Unknown file extension .svelte' errors during SSR, add svelte-sonner to the ssr.noExternal configuration in your vite.config.ts file.

```ts
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [sveltekit()],
	ssr: {
		noExternal: ['svelte-sonner']
	}
});
```

--------------------------------

### Singleton Initialization

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast-state.md

The exported singleton instance of the ToastState class.

```ts
export const toastState = new ToastState();
```

--------------------------------

### toast(message, options?)

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Creates a default toast notification. Can accept a string message or a custom Svelte component.

```APIDOC
## toast(message, options?)

### Description
Displays a basic toast notification. You can provide an options object to include a description, custom icon, or action buttons.

### Parameters
- **message** (string|Component) - Required - The content to display in the toast.
- **options** (object) - Optional - Configuration object containing `description`, `icon`, `action`, or `id`.
```

--------------------------------

### addToast Method

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast-state.md

Prepends a toast to the state. This is a no-op in non-browser (SSR) environments.

```ts
addToast = (data: ToastT): void => {
	if (!isBrowser) return;
	this.toasts.unshift(data);
};
```

--------------------------------

### useDocumentHidden Reactive Utility

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/internal.md

A reactive utility that tracks document visibility. It is used to pause toast timers when the page is hidden.

```ts
import { on } from 'svelte/events';

export function useDocumentHidden() {
	let current = $state(typeof document !== 'undefined' ? document.hidden : false);

	$effect(() => {
		return on(document, 'visibilitychange', () => {
			current = document.hidden;
		});
	});

	return {
		get current() {
			return current;
		}
	};
}
```

--------------------------------

### Initialize Toaster and trigger toast

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Add the Toaster component to your app and use the toast function to trigger notifications.

```svelte
<script>
	import { Toaster, toast } from 'svelte-sonner';
</script>

<Toaster />
<button onclick={() => toast('My first toast')}>Give me a toast</button>
```

--------------------------------

### cn and isBrowser Helpers

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/internal.md

Utility functions for class name composition and environment detection. cn joins truthy class names, while isBrowser guards against SSR execution.

```ts
export function cn(...classes: (string | undefined)[]) {
	return classes.filter(Boolean).join(' ');
}

export const isBrowser = typeof document !== 'undefined';
```

--------------------------------

### Toast custom method implementation

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast.md

The internal implementation of the custom toast method.

```ts
custom = <T extends AnyComponent>(component: T, data?: ExternalToast<T>): string | number => {
	const id = getToastId(data);
	this.create({ component, ...data, id });
	return id;
};
```

--------------------------------

### Custom component toast

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Pass a component as the first argument to render a custom component while maintaining default styling.

```js
toast(CustomComponent);
```

--------------------------------

### Configure Keyboard Focus Hotkey

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Customize the hotkey used to focus the toast area by providing an array of event.code values to the hotkey property.

```svelte
<Toaster hotkey={['KeyC']} />
```

--------------------------------

### toast.promise implementation

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast.md

The internal implementation of the toast.promise method from src/lib/toast-state.svelte.ts.

```ts
promise = <ToastData>(promise: PromiseT<ToastData>, data?: PromiseData<ToastData>): string | number | undefined => {
	if (!data) {
		// Nothing to show
		return;
	}
	let id: string | number | undefined = undefined;
	if (data.loading !== undefined) {
		id = this.create({
			...data,
			promise,
			type: 'loading',
			message: typeof data.loading === 'string' ? data.loading : data.loading()
		});
	}
	const p = promise instanceof Promise ? promise : promise();
	let shouldDismiss = id !== undefined;
	p.then((response) => {
		if (typeof response === 'object' && response && 'ok' in response && typeof response.ok === 'boolean' && !response.ok) {
			shouldDismiss = false;
			const message = constructPromiseErrorMessage(response);
			this.create({ id, type: 'error', message });
		} else if (data.success !== undefined) {
			shouldDismiss = false;
			const message = typeof data.success === 'function' ? data.success(response) : data.success;
			this.create({ id, type: 'success', message });
		}
	})
		.catch((error) => {
			if (data.error !== undefined) {
				shouldDismiss = false;
				const message = typeof data.error === 'function' ? data.error(error) : data.error;
				this.create({ id, type: 'error', message });
			}
		})
		.finally(() => {
			if (shouldDismiss) {
				// Toast is still in load state (and will be indefinitely — dismiss it)
				this.dismiss(id);
				id = undefined;
			}
			data.finally?.();
		});
	return id;
};
```

--------------------------------

### Action toast

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Renders a button within the toast.

```js
toast('Event has been created', {
	action: {
		label: 'Undo',
		onClick: () => console.log('Undo')
	}
});
```

--------------------------------

### create<T>(data)

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast-state.md

The primary method for creating or updating a toast. It handles the logic for adding new toasts or updating existing ones based on the provided ID.

```APIDOC
## create<T>(data)

### Description
The funnel every toast creation or update passes through. It determines whether to add a new toast or update an existing one based on the provided data.

### Parameters
- **data** (ExternalToast<T> & { message?: string | T; type?: ToastTypes; promise?: PromiseT }) - Required - Toast payload containing configuration and content.

### Returns
- **id** (string | number) - The unique identifier of the toast.
```

--------------------------------

### Info toast

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Renders a question mark icon in front of the message.

```js
toast.info('Event has new information');
```

--------------------------------

### reset(): void

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast-state.md

Clears all toasts, heights, and pending removal timers.

```APIDOC
## reset(): void

### Description
Clears all toasts, heights, and pending removal timers.
```

--------------------------------

### Apply global toast styling

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Use toastOptions on the Toaster component to apply styles and classes to all toasts globally.

```svelte
<Toaster
	toastOptions={{
		style: 'background: red;',
		class: 'my-toast',
		descriptionClass: 'my-toast-description'
	}}
/>
```

--------------------------------

### Warning toast

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Renders a warning icon in front of the message.

```js
toast.warning('Event has warning');
```

--------------------------------

### toast.error(message, options?)

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Creates an error toast with an error icon.

```APIDOC
## toast.error(message, options?)

### Description
Displays an error toast notification.
```

--------------------------------

### Toast message method implementation

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast.md

The internal implementation of the default message toast method.

```ts
message = <T extends AnyComponent>(message: string | T, data?: ExternalToast<T>) => {
	return this.create<T>({ ...data, type: 'default', message });
};
```

--------------------------------

### Custom headless toast component and invocation

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast.md

Defining a custom headless component that receives a closeToast prop and invoking it via toast.custom.

```svelte
<script>
	// HeadlessToast.svelte — receives `closeToast` prop
	const { closeToast } = $props();
</script>

<div>
	This is a custom component
	<button onclick={closeToast}>close</button>
</div>
```

```ts
import HeadlessToast from './HeadlessToast.svelte';

toast.custom(HeadlessToast, {
	componentProps: { eventName: 'Louvre Museum' }
});
```

--------------------------------

### Set the toast theme

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Change the theme using the theme prop on the Toaster component. The default is light.

```svelte
<Toaster theme="dark" />
```

--------------------------------

### create method implementation

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast-state.md

The primary funnel for toast creation and updates. It handles toast ID generation, fallback logic for the deprecated dismissable property, and determines whether to add or update a toast based on its existence.

```ts
create = <T extends AnyComponent>(
	data: ExternalToast<T> & {
		message?: string | T;
		type?: ToastTypes;
		promise?: PromiseT;
	}
): string | number => {
	const { message, ...rest } = data;
	const id = getToastId(data);
	// Support deprecated `dismissable` as a fallback for backwards compatibility
	const dismissible =
		data.dismissible !== undefined
			? data.dismissible
			: data.dismissable !== undefined
				? data.dismissable
				: true;
	const type = data.type === undefined ? 'default' : data.type;
	untrack(() => {
		this.cancelRemoval(id);
		const alreadyExists = this.toasts.find((toast) => toast.id === id);
		if (alreadyExists?.dismiss || alreadyExists?.delete) {
			this.remove(id);
			this.addToast({ ...rest, id, title: message, dismissible, type, updated: true });
		} else if (alreadyExists) {
			this.updateToast({ id, data, type, message, dismissible });
		} else {
			this.addToast({ ...rest, id, title: message, dismissible, type });
		}
	});
	return id;
};
```

--------------------------------

### setHeight(data: HeightT) method

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast-state.md

Upserts a HeightT entry. Updates in place if the toast height exists, otherwise inserts it based on the toast's order to maintain correct offset math.

```ts
setHeight = (data: HeightT) => {
	// untrack: setHeight runs inside a $effect; a tracked read of this.heights
	// would re-trigger it on the write below (effect_update_depth_exceeded).
	untrack(() => {
		const heightIdx = this.#findHeightIdx(data.toastId);
		if (heightIdx !== -1) {
			this.heights[heightIdx] = data;
			return;
		}
		const order = new Map(this.toasts.map((toast, idx) => [toast.id, idx]));
		const toastOrder = order.get(data.toastId) ?? -1;
		const insertIdx = this.heights.findIndex(
			(height) => (order.get(height.toastId) ?? Infinity) > toastOrder
		);
		if (insertIdx === -1) {
			this.heights.push(data);
		} else {
			this.heights.splice(insertIdx, 0, data);
		}
	});
};
```

--------------------------------

### Toast with component and props

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast.md

Using a Svelte component as a toast message with custom props.

```ts
import TestWithProps from './TestWithProps.svelte';
toast.warning(TestWithProps, {
	componentProps: { message: 'This is <br />multiline message' }
});
```

--------------------------------

### Style with Tailwind CSS globally

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Set unstyled to true in toastOptions and use the classes object to map Tailwind utility classes to toast elements.

```svelte
<Toaster
	toastOptions={{
		unstyled: true,
		classes: {
			toast: 'bg-blue-400',
			title: 'text-red-400',
			description: 'text-red-400',
			actionButton: 'bg-zinc-400',
			cancelButton: 'bg-orange-400',
			closeButton: 'bg-lime-400'
		}
	}}
/>
```

--------------------------------

### Icon component source

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/icon.md

The internal implementation of the Icon component using Svelte 5 runes.

```svelte
<script lang="ts">
	import type { ToastTypes } from '$lib/types.js';

	const { type = 'success' }: { type: ToastTypes } = $props();
</script>
```

--------------------------------

### toast.dismiss implementation

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast.md

The internal implementation of the toast.dismiss method from src/lib/toast-state.svelte.ts.

```ts
dismiss = (id?: number | string): string | number | undefined => {
	untrack(() => {
		if (id === undefined) {
			// we're dismissing all the active toasts
			this.toasts = this.toasts.map((toast) => (toast.dismiss ? toast : { ...toast, dismiss: true }));
			return;
		}
		// we're dismissing a specific toast
		const toastIdx = this.toasts.findIndex((toast) => toast.id === id);
		if (this.toasts[toastIdx]) {
			this.toasts[toastIdx] = { ...this.toasts[toastIdx], dismiss: true };
		}
	});
	return id;
};
```

--------------------------------

### Apply per-toast styling

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Pass style and class options directly when calling the toast function to style a specific toast.

```js
toast('Event has been created', {
	style: 'background: red;',
	class: 'my-toast',
	descriptionClass: 'my-toast-description'
});
```

--------------------------------

### useSonner

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/index.md

A function that returns the current Sonner state.

```APIDOC
## useSonner

### Description
A function that returns the `SonnerState`, allowing access to the internal state of the toast system.

### Usage
```ts
import { useSonner } from 'svelte-sonner';

const state = useSonner();
```
```

--------------------------------

### Configure Multiple Toasters

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Use the id property on the Toaster component to create multiple toast containers. Toasts can then be routed to specific containers using the toasterId option.

```svelte
<Toaster />
<Toaster id="top" position="top-center" />
```

```js
toast('Renders in the default toaster');
toast('Renders in the top toaster', { toasterId: 'top' });
```

--------------------------------

### ToastClasses

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/types.md

Defines the CSS class configuration for various elements within a toast notification.

```APIDOC
## ToastClasses

### Description
Defines the CSS class configuration for various elements within a toast notification, including support for type-specific styling.

### Fields
- **toast** (string) - Optional - CSS class for the toast container.
- **title** (string) - Optional - CSS class for the toast title.
- **description** (string) - Optional - CSS class for the toast description.
- **loader** (string) - Optional - CSS class for the loader element.
- **closeButton** (string) - Optional - CSS class for the close button.
- **cancelButton** (string) - Optional - CSS class for the cancel button.
- **actionButton** (string) - Optional - CSS class for the action button.
- **icon** (string) - Optional - CSS class for the icon element.
- **content** (string) - Optional - CSS class for the content wrapper.
- **type keys** (string) - Optional - Extra class applied when the toast has a specific type (success, error, info, warning, loading, default, action, normal).
```

--------------------------------

### AnyComponent and ExternalToast type aliases

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast.md

Type definitions for the components and toast options used by the toast function.

```ts
type AnyComponent = Component<any, any, string>;

type ExternalToast<T extends AnyComponent = AnyComponent> = Omit<
	ToastT<T>,
	'id' | 'type' | 'title' | 'promise' | 'updated'
> & {
	id?: number | string;
};
```

--------------------------------

### updateToast Method

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast-state.md

Merges partial data into an existing toast and resets its auto-close timer.

```ts
updateToast = ({ id, data, type, message }: UpdateToastProps): void => {
	const toastIdx = this.toasts.findIndex((toast) => toast.id === id);
	const toastToUpdate = this.toasts[toastIdx];
	this.toasts[toastIdx] = {
		...toastToUpdate,
		...data,
		id,
		title: message,
		type,
		dismiss: false,
		delete: false,
		updated: true
	};
};
```

```ts
type UpdateToastProps = {
	id: number | string;
	data: Partial<ToastT>;
	type: ToastTypes;
	message: string | AnyComponent | undefined;
	dismissible: boolean;
};
```

--------------------------------

### Render a headless custom toast

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Use toast.custom to render an unstyled component. The component must dispatch a 'closeToast' event to handle dismissal.

```svelte
<script>
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();
</script>

<div>
	This is a custom component <button onclick={() => dispatch('closeToast')}>close</button>
</div>
```

```js
import HeadlessToast from './HeadlessToast.svelte';

toast.custom(HeadlessToast);
```

--------------------------------

### toast

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/index.md

A callable function with attached methods used to trigger and manage toast notifications.

```APIDOC
## toast

### Description
A callable function used to trigger toast notifications. It includes attached methods for managing toast states.

### Usage
```ts
import { toast } from 'svelte-sonner';

toast('My toast message');
```
```

--------------------------------

### toast.message

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast.md

Triggers a default toast notification.

```APIDOC
## toast.message(message, data?)

### Description
Triggers a default toast notification. This is functionally identical to calling `toast()` directly.

### Parameters
- **message** (string | AnyComponent) - Required - Message text or component.
- **data** (ExternalToast<T>) - Optional - Toast options.

### Returns
- **id** (string | number) - The unique identifier for the toast.
```

--------------------------------

### Loader Component

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/icon.md

The Loader component renders a 12-bar spinner animation.

```APIDOC
## <Loader />

### Description
Renders a 12-bar spinner animation used for loading states.

### Props
- **visible** (boolean) - Required - Toggles the visibility of the loader.
- **class** (string) - Optional - Additional CSS classes to apply to the wrapper.

### Usage Example
```svelte
<script>
  import { Loader } from 'svelte-sonner';
</script>

<Loader visible class="my-spinner" />
```
```

--------------------------------

### SwipeDirection

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/types.md

Defines the allowed directions for dismissing a toast via swipe gestures.

```APIDOC
## SwipeDirection

### Description
Defines the allowed directions for dismissing a toast via swipe gestures.

### Values
- **'top'**
- **'right'**
- **'bottom'**
- **'left'**
```

--------------------------------

### Handle toast lifecycle callbacks

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Use onDismiss and onAutoClose to trigger logic when a toast is manually closed or automatically expires.

```js
toast('Event has been created', {
	onDismiss: (t) => console.log(`Toast with id ${t.id} has been dismissed`),
	onAutoClose: (t) => console.log(`Toast with id ${t.id} has been closed automatically`)
});
```

--------------------------------

### Position Type Definition

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/types.md

Defines the available screen positions for toast notifications.

```ts
export type Position =
	| 'top-left'
	| 'top-right'
	| 'bottom-left'
	| 'bottom-right'
	| 'top-center'
	| 'bottom-center';
```

--------------------------------

### setHeight(data: HeightT): void

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast-state.md

Upserts a HeightT entry. Updates in place when the toast's height is already recorded, otherwise inserts at the position matching the toast's order in toasts.

```APIDOC
## setHeight(data: HeightT): void

### Description
Upserts a `HeightT` entry (`{ height, toastId, toasterId?, position? }`). Updates in place when the toast's height is already recorded, otherwise inserts at the position matching the toast's order in `toasts` (newest-first), so stacked-toast offset math stays correct even with batched mounts.
```

--------------------------------

### Theme Type Definition

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/types.md

Defines the supported theme modes for toast notifications.

```ts
export type Theme = 'light' | 'dark';
```

--------------------------------

### toast.success / toast.info / toast.warning / toast.error / toast.loading

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast.md

Triggers a toast notification with a specific type. These methods share the same signature and affect the rendered icon and behavior.

```APIDOC
## toast.[type](message, data?)

### Description
Triggers a toast notification. The type (success, info, warning, error, loading) determines the icon, styling, and behavior (e.g., loading toasts may disable dismissal).

### Parameters
- **message** (string | AnyComponent) - Required - Message text or component rendered as the toast title.
- **data** (ExternalToast<T>) - Optional - Toast options object.

### Returns
- **id** (string | number) - The unique identifier for the toast.

### Example
```ts
toast.success('Event has been created');
toast.error('Event has not been created');
```
```

--------------------------------

### toast.promise(promise, data?)

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast.md

Triggers a toast notification that updates based on the lifecycle of a provided promise.

```APIDOC
## toast.promise(promise, data?)

### Description
Displays a toast that transitions through states (loading, success, error) based on the resolution or rejection of a promise.

### Parameters
- **promise** (PromiseT<ToastData>) - Required - A Promise or a thunk returning one.
- **data** (PromiseData<ToastData>) - Optional - Configuration object containing loading, success, and error messages or callbacks.

### Returns
- **string | number | undefined** - The loading toast id, or undefined if data is omitted.

### Example
```ts
toast.promise(fetch('/api/user'), {
	loading: 'Fetching user…',
	success: (data) => `${data.name} has been added!`,
	error: (err) => `Request failed: ${err.message}`
});
```
```

--------------------------------

### Configure ssr.noExternal in vite.config.ts

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toaster.md

Add svelte-sonner to the ssr.noExternal array in your Vite configuration if the build fails due to externalized .svelte files.

```ts
export default defineConfig({
	plugins: [sveltekit()],
	ssr: { noExternal: ['svelte-sonner'] }
});
```

--------------------------------

### Public API surface in src/lib/index.ts

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/index.md

Exports the primary components, functions, and types available for consumption from the library.

```typescript
import Icon from './Icon.svelte';
import Loader from './Loader.svelte';
import Toaster from './Toaster.svelte';

export { toast, useSonner } from './toast-state.svelte.js';

export { Icon, Loader, Toaster };

export type { ToastT, ExternalToast, ToasterProps, ToastOptions } from './types.js';
```

--------------------------------

### Retrieve visible toasts with useSonner

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Use the useSonner hook to access the current list of visible toasts.

```ts
const sonner = useSonner();

$effect(() => console.log(sonner.toasts));
```

--------------------------------

### Configure toast position

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Set the position prop on the Toaster component. Available options include top-left, top-center, top-right, bottom-left, bottom-center, and bottom-right.

```svelte
<!-- Available positions -->
<!-- top-left, top-center, top-right, bottom-left, bottom-center, bottom-right -->

<Toaster position="top-center" />
```

--------------------------------

### Target specific toasters

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toaster.md

Demonstrates how to send toast notifications to specific toaster instances using the toasterId option.

```ts
toast('Renders in the default toaster');
toast('Renders in the top toaster', { toasterId: 'top' });
```

--------------------------------

### message and error type wrappers

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/_autodocs/api-reference/toast-state.md

Helper methods for creating specific toast types. The message method defaults to the 'default' type, while the error method forces the 'error' type.

```ts
message = <T extends AnyComponent>(message: string | T, data?: ExternalToast<T>) => {
	return this.create<T>({ ...data, type: 'default', message });
};

error = <T extends AnyComponent>(message: string | T, data?: ExternalToast<T>): string | number => {
	return this.create({ ...data, type: 'error', message });
};
```

--------------------------------

### Error toast

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Renders an error icon in front of the message.

```js
toast.error('Event has not been created');
```

--------------------------------

### Configure toast duration

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Set the duration globally via the Toaster component or per-toast in the toast function. Use Number.POSITIVE_INFINITY for persistent toasts.

```svelte
<Toaster duration={10000} />
```

```js
toast('Event has been created', {
	duration: 10000
});

// Persisent toast
toast('Event has been created', {
	duration: Number.POSITIVE_INFINITY
});
```

--------------------------------

### Style toast types with Tailwind

Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md

Define classes for specific toast types like error, success, warning, or info within the toastOptions.

```svelte
<Toaster
	toastOptions={{
		unstyled: true,
		classes: {
			error: 'bg-red-400',
			success: 'text-green-400',
			warning: 'text-yellow-400',
			info: 'bg-blue-400'
		}
	}}
/>
```
Tokens:
Raw