An opinionated toast component for Svelte.
npm install svelte-sonnerhttps://github.com/wobsoriano/svelte-sonner/assets/13049130/4b9c250f-1431-4130-9c5b-5a4f8b0210c5
An opinionated toast component for Svelte. A port of Emil Kowalski's Sonner.
Install it:
``bash`
npm i svelte-sonneror
yarn add svelte-sonneror
pnpm add svelte-sonner
Add to your app, it will be the place where all your toasts will be rendered. After that, you can use toast() from anywhere in your app.
`svelte
`
Most basic toast. You can customize it (and any other type) by passing an options object as the second argument.
`js`
toast('Event has been created');
With custom icon and description:
`js
import Icon from './Icon.svelte';
toast('Event has been created', {
description: 'Monday, January 3rd at 6:00pm',
icon: Icon
});
`
Renders a checkmark icon in front of the message.
`js`
toast.success('Event has been created');
Renders a question mark icon in front of the message.
`js`
toast.info('Event has new information');
Renders a warning icon in front of the message.
`js`
toast.warning('Event has warning');
Renders an error icon in front of the message.
`js`
toast.error('Event has not been created');
Renders a button.
`js`
toast('Event has been created', {
action: {
label: 'Undo',
onClick: () => console.log('Undo')
}
});
Starts in a loading state and will update automatically after the promise resolves or fails.
`js`
toast.promise(() => new Promise((resolve) => setTimeout(resolve, 2000)), {
loading: 'Loading',
success: 'Success',
error: 'Error'
});
You can pass a function to the success/error messages to incorporate the result/error of the promise.
`js${data.name} has been added!
toast.promise(promise, {
loading: 'Loading...',
success: (data) => {
return ;`
},
error: 'Error'
});
You can pass a component as the first argument instead of a string to render custom component while maintaining default styling. You can use the headless version below for a custom, unstyled toast.
`js`
toast(CustomComponent);
You can update a toast by using the toast function and passing it the id of the toast you want to update, the rest stays the same.
`js
const toastId = toast('Sonner');
toast.success('Toast has been updated', {
id: toastId
});
`
You can use toast.custom to render an unstyled toast with custom component while maintaining the functionality.
`svelte
js
import HeadlessToast from './HeadlessToast.svelte';toast.custom(HeadlessToast);
`$3
You can change the theme using the
prop. Default theme is light.`svelte
`$3
You can change the position through the
prop on the component. Default is bottom-right.`svelte
`$3
Toasts can also be expanded by default through the
prop. You can also change the amount of visible toasts which is 3 by default.`svelte
`$3
Styling can be done globally via
, this way every toast will have the same styling.`svelte
style: 'background: red;',
class: 'my-toast',
descriptionClass: 'my-toast-description'
}}
/>
`You can also use the same props when calling
to style a specific toast.`js
toast('Event has been created', {
style: 'background: red;',
class: 'my-toast',
descriptionClass: 'my-toast-description'
});
`$3
The preferred way to style the toasts with tailwind is by using the
prop. That will give you an unstyled toast which you can then style with tailwind.`svelte
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'
}
}}
/>
`You can do the same when calling
.`js
toast('Hello World', {
unstyled: true,
classes: {
toast: 'bg-blue-400',
title: 'text-red-400 text-2xl',
description: 'text-red-400',
actionButton: 'bg-zinc-400',
cancelButton: 'bg-orange-400',
closeButton: 'bg-lime-400'
}
});
`Styling per toast type is also possible.
svelte
unstyled: true,
classes: {
error: 'bg-red-400',
success: 'text-green-400',
warning: 'text-yellow-400',
info: 'bg-blue-400'
}
}}
/>
`$3
You can change the default icons using snippets:
svelte
{#snippet loadingIcon()}
{/snippet}
{#snippet successIcon()}
{/snippet}
{#snippet errorIcon()}
{/snippet}
{#snippet infoIcon()}
{/snippet}
{#snippet warningIcon()}
{/snippet}
`$3
Add a close button to all toasts that shows on hover by adding the
prop.`svelte
`$3
You can make error and success state more colorful by adding the
prop.`svelte
`$3
Offset from the edges of the screen.
svelte
`$3
To remove a toast programmatically use
. The toast() function returns the id of the toast.`js
const toastId = toast('Event has been created');toast.dismiss(toastId);
`You can also dismiss all toasts at once by calling
without an id.`js
toast.dismiss();
`$3
You can use the
hook to retrieve all visible toasts like below.`ts
const sonner = useSonner();$effect(() => console.log(sonner.toasts));
`$3
You can change the duration of each toast by using the
property, or change the duration of all toasts like this:`svelte
`js
toast('Event has been created', {
duration: 10000
});// Persisent toast
toast('Event has been created', {
duration: Number.POSITIVE_INFINITY
});
`$3
You can pass
and onAutoClose callbacks. onDismiss gets fired when either the close button gets clicked or the toast is swiped. onAutoClose fires when the toast disappears automatically after it's timeout (duration prop).`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)
});
`Keyboard focus
You can focus on the toast area by pressing ⌥/alt + T. You can override it by providing an array of
values for each key.`svelte
``MIT