Sonner
An opinionated toast component for Svelte, themed to match the design system.
Loading preview…
1<script lang="ts">
2 import { toast } from 'svelte-sonner';
3 import Button from '../button/button.svelte';
4 import { Toaster } from './index.js';
5</script>
6
7<Toaster />
8<Button
9 variant="outline"
10 onclick={() =>
11 toast('Event has been created', {
12 description: 'Sunday, December 03, 2023 at 9:00 AM',
13 action: {
14 label: 'Undo',
15 onClick: () => console.info('Undo')
16 }
17 })}
18>
19 Show Toast
20</Button>
21Installation
1. Install dependencies
2. Copy these files into your project
- ~/components/sonner/index.ts
- ~/components/sonner/sonner.svelte
Usage
Use sonner for toast notifications. Mount Toaster once near the root of your app, then call toast from svelte-sonner anywhere. Theme follows mode-watcher;
status icons come from lucide.
1<script lang="ts">
2 import { toast } from 'svelte-sonner';
3 import { Toaster } from '~/components/sonner';
4 import { Button } from '~/components/button';
5</script>
6
7<Toaster />
8<Button
9 variant="outline"
10 onclick={() =>
11 toast('Event has been created', {
12 description: 'Sunday, December 03, 2023 at 9:00 AM',
13 action: {
14 label: 'Undo',
15 onClick: () => console.info('Undo')
16 }
17 })}
18>
19 Show Toast
20</Button>