svileo

Use search to jump between sections.

Overview

`svileo` exposes a small set of helpers to create, update, and dismiss toasts. Every toast method returns an ID you can dismiss later.

Quick example
import { svileo } from 'svileo';

svileo.success({ title: 'Saved!' });
svileo.error({ title: 'Error', description: 'Try again.' });

Methods

show

(opts: SvileoOptions) => string

Show a toast with an explicit `type` (success/loading/error/warning/info/action).

success

(opts: SvileoOptions) => string

Show a success toast.

error

(opts: SvileoOptions) => string

Show an error toast.

warning

(opts: SvileoOptions) => string

Show a warning toast.

info

(opts: SvileoOptions) => string

Show an info toast.

action

(opts: SvileoOptions) => string

Show a toast with a primary action button.

promise

<T>(promise: Promise<T> | (() => Promise<T>), opts: SvileoPromiseOptions<T>) => Promise<T>

Show `loading` while pending, then transition to `success`, `error`, or `action`.

dismiss

(id: string) => void

Dismiss a specific toast by ID.

clear

(position?: SvileoPosition) => void

Dismiss all toasts, optionally scoped to a position.

Option & type definitions

SvileoState

`'success' | 'loading' | 'error' | 'warning' | 'info' | 'action'`

SvileoPosition

`'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'`

SvileoOptions

title
string
Toast heading.
description
Snippet | string
Body text or a Svelte Snippet.
type
SvileoState
Toast variant (used by `show`).
position
SvileoPosition
Where the toast appears.
duration
number | null
Auto-dismiss after ms. `null` persists.
icon
Snippet | null
Custom icon. `null` disables the icon.
styles
SvileoStyles
CSS class overrides for internal parts.
fill
string
Custom background colour.
roundness
number
Border radius in px.
autopilot
boolean | { expand?: number; collapse?: number }
Automatically expand/collapse based on timing.
button
SvileoButton
Inline action button configuration.

SvileoStyles

title: CSS class for title.
description: CSS class for description.
badge: CSS class for icon badge.
button: CSS class for action button.

SvileoButton

{ title: string; onClick: () => void }

SvileoPromiseOptions<T>

loading: SvileoOptions
success: SvileoOptions | ((data: T) => SvileoOptions)
error: SvileoOptions | ((err: unknown) => SvileoOptions)
action (optional): SvileoOptions | ((data: T) => SvileoOptions)
position (optional): SvileoPosition