Sonner
An opinionated toast notification, powered by svelte-sonner.
<script lang="ts">
import { Button } from "$lib/components/ui/button";
import { toast } from "svelte-sonner";
</script>
<Button
variant="ghost"
onclick={() =>
toast("Event created", {
description: "Sunday, December 03 at 9:00 AM"
})}
>
Show toast
</Button>Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initAdd the `svelte-sonner`
dependency and copy the source into $lib/components/ui/sonner.
Usage
Add the Toaster to your root layout once:
<script lang="ts">
import { Toaster } from '$lib/components/ui/sonner';
</script>
<Toaster />Then trigger toasts from anywhere:
<script lang="ts">
import { toast } from 'svelte-sonner';
import { Button } from '$lib/components/ui/button';
</script>
<Button onclick={() => toast('Event created')}>Show toast</Button>