sonner-svelte

An opinionated toast notification library for Svelte.

sonner-svelte is a svelte port of Emil Kowalski's react library sonner

Installation

1# npm
2npm install sonner-svelte
3# pnpm
4pnpm add sonner-svelte
5# yarn
6yarn add sonner-svelte

Basic Usage

1<script>
2 import { toast, Toaster } from 'sonner-svelte';
3</script>
4
5<Toaster />
6<button on:click={() => toast('This is a toast message')}>Render toast</button>

For more examples, check out the website

API

The api is similar to the react version, with a few differences

Custom toast

In the react version, custom toast components are passed as jsx elements, but in svelte, we can't do that. So, we pass the component as a SvelteComponent instead. It maintains the default styling.

If you want to create unstyled toast you need to create headless toast.

1<!-- CustomToast.svelte -->
2<script>
3 export let message;
4</script>
5
6<p>This is a custom Component</p>

1<script>
2 import { toast, Toaster } from 'sonner-svelte';
3 import CustomToast from './CustomToast.svelte';
4</script>
5
6<Toaster />
7<button on:click={() => toast(CustomToast)}>Render toast</button>

Headless toast (unstyled)

Similarly, when you want to create a custom headless (unstyled) toast, you need to pass the component as a SvelteComponent instead of a jsx element and its corresponding props as an object.

1<!-- HeadlessToast.svelte -->
2<script>
3 import _toast from 'sonner-svelte';
4 export let event;
5 export let toast; 
6 // toast is available when you pass a custom component. You don't need to pass it manually
7</script>
8
9<p>Created event: {event}!</p>
10<button on:click={() => _toast.dismiss(toast.id)}> close </button>

1<script>
2 import { toast, Toaster } from 'sonner-svelte';
3 import HeadlessToast from './HeadlessToast.svelte';
4
5 const handleClick = () => {
6  toast.custom(HeadlessToast, { props: { event: 'Louvre Museum' } });
7 };
8</script>
9
10<Toaster />
11<button on:click={handleClick}>Render toast</button>

Acknowledgements

Thanks to the original author @emilkowalski for creating sonner