API Reference
Complete reference for the VarselToaster component and the toast() interface.
VarselToaster
The root component that hosts the toast notifications. Place this once in your application (usually in +layout.svelte).
Props
| Prop | Type | Default |
|---|---|---|
position | ToastPosition | 'bottom-center' |
visibleToasts | number | 3 |
expand | boolean | true |
duration | number | 5000 |
closeButton | boolean | true |
pauseOnHover | boolean | true |
offset | number | string | undefined |
dir | 'ltr' | 'rtl' | 'auto' | 'auto' |
expandedGap | number | 12 |
toast()
The primary function to trigger notifications.
import { toast } from "varsel";
toast("My message");
// or
toast({ title: "My Title", description: "My message" });Methods
| Method | Signature |
|---|---|
toast | (data: string | ToastData) => string |
toast.success | (data: string | ToastData) => string |
toast.warning | (data: string | ToastData) => string |
toast.error | (data: string | ToastData) => string |
toast.info | (data: string | ToastData) => string |
toast.promise | (promise: Promise, options: ToastPromiseOptions) => string |
toast.custom | (component: Component, options?: ToastData) => string |
toast.dismiss | (id: string) => void |
toast.dismissAll | () => void |
ToastData Interface
The configuration object for an individual toast.
| Property | Type |
|---|---|
title | string |
description | string |
duration | number |
variant | 'default' | 'success' | 'warning' | 'destructive' | 'info' |
action | { label: string, onClick: () => void } |
onAutoClose | () => void |
onDismiss | () => void |
position | ToastPosition |
className | string |
component | Component |
componentProps | Record<string, any> |