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

PropTypeDefault
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

MethodSignature
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.

PropertyType
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>