Feedback

Toast

Sonner-style notification queue. Mount <Toaster /> once near the app root, then call toast() imperatively from anywhere — module-scope $state powers the queue.

Examples

Default

import {toast} from '$lib/components/ui/toast/toast.svelte.js';

toast({title: 'Saved', description: 'Your changes are live.'});

Variants

toast.success({title: 'Imported 1,204 books'});
toast.warn({title: 'Some files were skipped'});
toast.error({title: 'Upload failed', description: 'Network error.'});

With action

toast({
  title: 'Book deleted',
  action: {label: 'Undo', onClick: () => /* restore */}
});

Sticky

toast({title: 'Pinned', duration: Infinity});

Imperative API

Prop	Type	Default	Description
`toast({title, description?, variant?, duration?, action?})`	`function`	`—`	Push a toast onto the queue. Returns the toast id.
`toast.success(opts)`	`function`	`—`	Shorthand for variant=success.
`toast.warn(opts)`	`function`	`—`	Shorthand for variant=warn.
`toast.error(opts)`	`function`	`—`	Shorthand for variant=danger.
`dismiss(id)`	`function`	`—`	Manually dismiss a toast.
`dismissAll()`	`function`	`—`	Clear the queue.

Component props

Prop	Type	Default	Description
`position`	`'top-right' \| 'top-left' \| 'top-center' \| 'bottom-right' \| 'bottom-left' \| 'bottom-center'`	`'top-right'`	Where the stack lands on screen.

Install

CLI

npx @a3tai/mittsu add toast

Mount in your root layout

<script>
  import Toaster from '$lib/components/ui/toast/toaster.svelte';
</script>

<slot />
<Toaster position="top-right" />