Sonner

bun x bosia@latest add sonner

Komponen notifikasi toast tanpa dependensi. Menyediakan varian toast success, error, info, warning, dan default dengan styling kompatibel-shadcn.

Preview

Setup

Tambahkan komponen <Toaster /> ke root layout Anda agar toast bisa dirender dari mana saja di aplikasi Anda:

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

<Toaster />

{@render children()}

Props

Toaster

Penggunaan

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

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

Varian

<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>

Dengan Deskripsi

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

Menutup Secara Programatik

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

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