Toast ported

A short, polite word that dismisses itself.

Brief confirmation for a completed background action.

Live specimen

Loading demo…

Guidance

When to use

For short, non-blocking results of what someone just did.
When the message needs no action and can dismiss itself.
When one confirmation at a time is enough — otherwise use toast-stack.

When not to use

For stacked or queued results — use toast-stack.
For persistent, in-flow messages — use alert.
When people must respond before continuing — use dialog.

Installation

pnpm add sveltearc

Usage

<script lang="ts">
	import Toast from '$lib/components/toast/toast.svelte';

	let open = $state(true);
</script>

<Toast
	title="Changes saved"
	description="Your workspace is up to date."
	bind:open={open}
	onOpenChange={(o) => (open = o)}
/>

Variants & Examples

With description

Headline plus details under the title.

<Toast title="Changes saved" description="Your workspace is up to date." />

Title only

A bare confirmation with no description row.

<Toast title="Copied to clipboard" />

Controlled

Visibility driven by open and onOpenChange.

<Toast title="Changes saved" {open} onOpenChange={(o) => (open = o)} />

API Reference

Prop	Type	Default	Description
`title`	`string`	—	Headline of the toast.
`description`	`string`	—	Optional details rendered under the title.
`open`	`boolean`	true	Controls visibility. Flipping back to true resets the dismissed state.
`onOpenChange`	`(open: boolean) => void`	—	Fired with false when the toast dismisses (timer or close button).
`duration`	`number`	4500	Milliseconds before the toast closes itself. <= 0 disables the timer.
`class`	`string`	—	Additional classes merged with the toast class.

Keyboard Interactions

Key	Action
`Tab`	Move focus to the dismiss button.
`Enter / Space`	Dismiss the toast from the close button.

Accessibility

The toast is role="status" with aria-live="polite" and aria-atomic="true".
The tone icon is aria-hidden; the close button is labelled "Dismiss notification".

Motion

Phase 1 still-state: no animation. The toast renders its shown end-state and unmounts instantly on dismiss. Phase 2 wires the enter rise, the exit sink-or-throw, the check draw-in, the copy cross-fade and the drag-to-dismiss.

Notes for AI

Single-shot only — for queued results use toast-stack.
Keep one Toast mounted and change title/description to morph between states instead of swapping components.

Source of truth: registry/components/toast/toast.tsx