API

dynaura

The object you call from anywhere. Every method that shows a toast returns its id.

success(opts)

Also error(opts), warning(opts) and info(opts). opts is a string (title only) or an options object. Returns the toast id.

loading(opts)

Sticky toast with a spinner.

live(opts)

Live activity: sticky, with a running timer (default) or a waveform (kind: "wave").

promise(promise, { loading, success, error })

Morphs loading into success or error. Each can be a string, an options object, or a function of the result. Returns the original promise.

update(id, patch)

Patch a toast in place, including type. Also works on queued toasts.

dismiss(id?)

Dismiss the current toast (the next queued one shows) or a specific id.

clear()

Dismiss everything, including the queue.

Toast options

titlestringrequired

Main text.

descriptionstring | Node | ReactNode

Shown when the island expands.

iconstring | Node | ReactNodedefault built-in

Replaces the leading icon.

trailingstring | Node | ReactNode

Small right-side slot, e.g. "2 min".

durationnumber | nulldefault 4000

Milliseconds. null is sticky. loading and live default to null.

button{ title, onClick }

Action button. The toast dismisses after the click.

progressnumber (0 to 1)

Value bar plus rolling-digit percent.

confettibooleandefault false

Confetti burst when shown. Skipped under reduced motion.

kind"timer" | "wave"default "timer"

Flavor of a live toast.

variant"default" | "card"default "default"

"card": header tab plus a full-bleed custom body.

queuebooleandefault Toaster's queue

Per-toast override of the Toaster option.

Toaster options

These apply to <Toaster /> and to createToaster(). Mount one Toaster per page.

position"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right"default "top"

Where the island sits.

offsetnumberdefault 12

Pixels from the screen edge. Safe-area insets are added.

theme"dark" | "light" | "system" | CustomThemedefault "dark"

See Theming.

queuebooleandefault false

Show toasts one after another.

timerbooleandefault true

Thin time-remaining bar on timed toasts.

hapticsbooleandefault true

navigator.vibrate on show. A no-op where unsupported.

Entry points

dynaura

React: Toaster, dynaura.

dynaura/vue

Vue 3: Toaster, dynaura.

dynaura/svelte

Svelte: toaster action, dynaura.

dynaura/vanilla

Plain JS: createToaster, dynaura.

dynaura/styles.css

The stylesheet. Import it once.

TypeScript

Exported types: ToastOptions, ToastType, ToasterProps, CustomTheme, Position and Content.

import type { ToastOptions, CustomTheme } from "dynaura";