On this Page
Toaster
Mount one Toaster near the application root to render notifications created with the toast helper. The component reads the shared queue and positions its viewport-fixed notification region.
Usage
Svelte
<script lang="ts">
import { Toaster, toast } from 'fractalsvelte';
</script>
<Toaster position="bottom-right" />
<button onclick={() => toast('Changes saved.')}>Save</button>
Mount only one Toaster for an application-level queue. It may be rendered in a root layout so any route can call toast from an event handler.
API
| Prop | Type | Default | Description |
|---|---|---|---|
position | 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' | 'bottom-right' | Fixed viewport corner where queued notifications are rendered. |
Related
Use Toast for the standalone notification component and the queue helper API.