Sonner

bun x bosia@latest add sonner

A zero-dependency toast notification component. Provides success, error, info, warning, and default toast variants with shadcn-compatible styling.

Preview

Setup

Add the <Toaster /> component to your root layout so toasts can render from anywhere in your app:

<!-- src/routes/+layout.svelte -->
<script lang="ts">
	import { Toaster } from "$lib/components/ui/sonner";
</script>

<Toaster />

{@render children()}

Props

Toaster

Usage

<script lang="ts">
	import { toast } from "$lib/components/ui/sonner";
</script>

<button onclick={() => toast("Hello world!")}> Show Toast </button>

Variants

<script lang="ts">
	import { toast } from "$lib/components/ui/sonner";
</script>

<button onclick={() => toast("Default toast")}>Default</button>
<button onclick={() => toast.success("Success!")}>Success</button>
<button onclick={() => toast.error("Something went wrong")}>Error</button>
<button onclick={() => toast.info("FYI")}>Info</button>
<button onclick={() => toast.warning("Be careful")}>Warning</button>

With Description

<button
	onclick={() =>
		toast("Event created", {
			description: "Monday, January 3rd at 6:00pm",
		})}
>
	Show Toast
</button>

Programmatic Dismiss

<script lang="ts">
	import { toast } from "$lib/components/ui/sonner";

	const id = toast("Processing...");
	// Later:
	toast.dismiss(id);
</script>