Components
Toast
A dismissible semantic notification with optional timed dismissal.
Props
Native attributes and event handlers are forwarded to the root Alert component. Common transitions apply to that root.
Theme entries: toast,toastClose,toastContent,toastTitle.
| 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. |
duration | number | 5000 | See usage notes and the component API. |
element | HTMLDivElement | null | $bindable(null) | Bindable reference to the composition root. |
inTransition | TransitionProps | undefined | Enter transition override. |
isVisible | boolean | $bindable(true) | Bindable visibility state. |
message | string | '' | See usage notes and the component API. |
onDismiss | (() => void) | undefined | undefined | See usage notes and the component API. |
outTransition | TransitionProps | undefined | Exit transition override. |
status | ToastStatus | 'info' | See usage notes and the component API. |
theme | Theme | globalTheme | Local Theme instance; defaults to the global theme. |
title | string | '' | 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 Toast from sveltewind/components. This example shows its default styling in a usable context.
Loading...duration is in milliseconds; zero keeps the notification visible until dismissed. Hover or keyboard focus pauses timed dismissal; the full duration restarts when interaction ends. Error messages use role=alert; other statuses use role=status.
Examples
Theme variants
Every variant available for Toast in the built-in themes is shown below.
compact — Apply the compact variant.
Loading...spacious — Apply the spacious variant.
Loading...soft — Apply the soft variant.
Loading...Class overrides
Apply rounded-xl border border-primary-500/40 p-4 locally.
Loading...Props and behavior
Change status, duration while retaining the default component styling.
Loading...Content and values
Provide different title, message values.
Loading...