Components
Toaster
A positioned stack of notifications controlled through a bindable array.
Props
Native attributes and event handlers are forwarded to the root Div component. Common transitions apply to that root.
Theme entries: toaster.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Custom content; see the usage notes for its component-specific role. |
class | string | '' | Tailwind utilities merged after the component theme and variants. |
element | HTMLDivElement | null | $bindable(null) | Bindable reference to the composition root. |
inTransition | TransitionProps | undefined | Enter transition override. |
isVisible | boolean | $bindable(true) | Bindable visibility state. |
onDismiss | ((id: string) => void) | undefined | undefined | See usage notes and the component API. |
outTransition | TransitionProps | undefined | Exit transition override. |
position | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'bottom-right' | See usage notes and the component API. |
theme | Theme | globalTheme | Local Theme instance; defaults to the global theme. |
toasts | ToastItem[] | $bindable([]) | See usage notes and the component API. |
transition | TransitionProps | [noopTransition, {}] | Shared transition function and options. |
variants | string[] | [] | Ordered component theme variants or cross-component references. |
Default usage
Import Toaster from sveltewind/components. This example shows its default styling in a usable context.
Loading...Keep the notifications array in your application and give every item a unique id. Dismissed notifications are removed from the bound array. Each item supports title, message, status, and duration.
Examples
Theme variants
Every variant available for Toaster in the built-in themes is shown below.
bottom-left — Apply the bottom-left variant.
Loading...bottom-right — Apply the bottom-right variant.
Loading...top-left — Apply the top-left variant.
Loading...top-right — Apply the top-right variant.
Loading...Class overrides
Apply rounded-xl border border-primary-500/40 p-4 locally.
Loading...Props and behavior
Change position while retaining the default component styling.
Loading...Content and values
Provide different text, child content, or definitions inside the required parent context.
Loading...