toast() Create and display a toast notification.
toast ( message : Message , options ?: ToastOptions ): string
The message to display. Can be a string, JSX element, or a function that receives the toast object and returns a renderable value. type Message = ValueOrFunction < Renderable , Toast > type Renderable = JSX . Element | string | null
Optional configuration for the toast. Unique identifier for the toast. If not provided, one will be generated automatically.
Custom icon to display. Can be a string, JSX element, or null.
Duration in milliseconds before the toast auto-dismisses. Defaults vary by toast type.
Where to display the toast. One of: 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'.
Custom CSS styles to apply to the toast.
CSS class name to apply to the toast.
Theme configuration for the default icons. interface IconTheme { primary ?: string ; secondary ?: string ; }
ARIA attributes for accessibility. { role : 'status' | 'alert' ; 'aria-live' : 'assertive' | 'off' | 'polite' ; }
Delay in milliseconds before removing the toast from the DOM after dismissal.
The unique ID of the created toast.
Example import { toast } from 'solid-toast' ; // Simple string message const id = toast ( 'Hello World' ); // With options toast ( 'Custom toast' , { duration: 5000 , position: 'top-center' , style: { background: '#333' , color: '#fff' , }, }); // With JSX toast ( < div >< strong > Bold </ strong > message </ div > ); // Dynamic message based on toast state toast (( t ) => `Toast ${ t . visible ? 'visible' : 'hidden' } ` );
toast.success() Create and display a success toast with a checkmark icon.
toast . success ( message : Message , options ?: ToastOptions ): string
The success message to display.
Optional configuration. Same as toast() options.
The unique ID of the created toast.
Example toast . success ( 'Successfully saved!' );
toast.error() Create and display an error toast with an error icon.
toast . error ( message : Message , options ?: ToastOptions ): string
The error message to display.
Optional configuration. Same as toast() options.
The unique ID of the created toast.
Example toast . error ( 'Something went wrong!' );
toast.loading() Create and display a loading toast with a spinner icon.
toast . loading ( message : Message , options ?: ToastOptions ): string
The loading message to display.
Optional configuration. Same as toast() options.
The unique ID of the created toast.
Example const id = toast . loading ( 'Saving...' ); // Later, update or dismiss it toast . success ( 'Saved!' , { id });
toast.custom() Create and display a custom toast without any default icon.
toast . custom ( message : Message , options ?: ToastOptions ): string
The custom message to display.
Optional configuration. Same as toast() options.
The unique ID of the created toast.
Example toast . custom ( < div class = "custom-toast" > < MyCustomIcon /> < span > Custom notification </ span > </ div > );
toast.promise() Automatically handles promise states with different toast messages for loading, success, and error states.
toast . promise < T >( promise : Promise < T > , msgs : { loading: Renderable ; success : ValueOrFunction < Renderable , T>; error: ValueOrFunction < Renderable , any>; }, opts ?: DefaultToastOptions ): Promise < T >
Messages for each state. Message to show while the promise is pending.
success
ValueOrFunction<Renderable, T>
required
Message to show when the promise resolves. Can be a static value or a function that receives the resolved value.
error
ValueOrFunction<Renderable, any>
required
Message to show when the promise rejects. Can be a static value or a function that receives the error.
Optional configuration to apply to all toast states.
Returns the original promise.
Example const saveData = async () => { const response = await fetch ( '/api/save' , { method: 'POST' }); return response . json (); }; toast . promise ( saveData (), { loading: 'Saving...' , success: 'Saved successfully!' , error: 'Failed to save.' , }); // With dynamic messages toast . promise ( fetchUser ( id ), { loading: 'Loading user...' , success : ( user ) => `Welcome, ${ user . name } !` , error : ( err ) => `Error: ${ err . message } ` , });
toast.dismiss() Dismiss one or all toasts.
toast . dismiss ( toastId ?: string ): void
The ID of the toast to dismiss. If omitted, all toasts will be dismissed.
Example // Dismiss a specific toast const id = toast . loading ( 'Please wait...' ); toast . dismiss ( id ); // Dismiss all toasts toast . dismiss ();
toast.remove() Immediately remove one or all toasts from the DOM.
toast . remove ( toastId ?: string ): void
The ID of the toast to remove. If omitted, all toasts will be removed.
Example // Remove a specific toast const id = toast ( 'Hello' ); toast . remove ( id ); // Remove all toasts toast . remove ();
The difference between dismiss() and remove() is that dismiss() triggers the exit animation before removal, while remove() immediately removes the toast from the DOM.