Toaster

Melt/sonner-style toaster: toasts collapse into a peeking stack at the bottom-right and fan out on hover/focus.

Countdowns pause while hovered. aria-live=polite region; error toasts use role="alert". Portalled to the body and flagged data-driftwood-live, so a Dialog's inert background leaves it alone — a toast raised over a modal stays announced and dismissable.

Feedback · portalled to <body> · keyboard contract

<script lang="ts">
	import { Toaster } from '@l4st/driftwood';
</script>

Light	Dark

Props

No props.

Keyboard

Key	Does
Escape	dismiss the focused toast

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<script lang="ts">
	import { Toaster, toast } from '$lib/index.js';
	import { onMount } from 'svelte';

	onMount(() => {
		toast.success({ title: 'Scan complete', description: '2.56M files indexed.', duration: 0 });
		toast.error({ title: 'Scan failed', description: 'Permission denied on /mnt/cold.', duration: 0 });
		toast({ title: 'Settings saved', duration: 0 });
	});
</script>

<Toaster />

Feedback · Badge · Alert · Progress · Spinner · Skeleton · Avatar · Image

---

← All components · Getting started · Theming · source