Overview
The toast() function is the primary way to display notifications in Solid Toast. It returns a unique toast ID that can be used to dismiss or update the toast later.
Basic Usage
import { toast } from 'solid-toast';
function MyComponent() {
const notify = () => toast('Hello, World!');
return <button onClick={notify}>Show Toast</button>;
}
Function Signature
toast(message: Message, options?: ToastOptions): string
The content to display in the toast. Can be a string, JSX element, or a function that returns either.type Message = ValueOrFunction<Renderable, Toast>
type Renderable = JSX.Element | string | null
Optional configuration object for customizing the toast behavior and appearance.interface ToastOptions {
id?: string;
icon?: Renderable;
duration?: number;
ariaProps?: {
role: 'status' | 'alert';
'aria-live': 'assertive' | 'off' | 'polite';
};
className?: string;
style?: JSX.CSSProperties;
position?: ToastPosition;
unmountDelay?: number;
iconTheme?: IconTheme;
}
Returns a unique toast ID that can be used with toast.dismiss() or toast.remove().
Toast Variants
Solid Toast provides several built-in variants for common notification types:
Success
Error
Loading
Custom
Blank
toast.success('Successfully saved!');
// With options
toast.success('User created', {
duration: 4000,
position: 'bottom-center',
});
toast.error('Something went wrong');
// With custom styling
toast.error('Failed to save', {
style: {
background: '#ff4444',
color: 'white',
},
});
const id = toast.loading('Saving...');
// Later, update it
setTimeout(() => {
toast.success('Saved!', { id });
}, 2000);
toast.custom((t) => (
<div class="custom-toast">
<h3>Custom Toast</h3>
<p>This is a completely custom toast</p>
<button onClick={() => toast.dismiss(t.id)}>Close</button>
</div>
));
toast('Just a message');
// or explicitly
toast.blank('Plain notification');
toast.promise()
Automatically handles promise states with different messages:
toast.promise<T>(
promise: Promise<T>,
msgs: {
loading: Renderable;
success: ValueOrFunction<Renderable, T>;
error: ValueOrFunction<Renderable, any>;
},
opts?: DefaultToastOptions
): Promise<T>
Example
const myPromise = fetchData();
toast.promise(myPromise, {
loading: 'Loading data...',
success: (data) => `Successfully loaded ${data.count} items`,
error: (err) => `Error: ${err.message}`,
});
The promise is returned unchanged, so you can still chain .then() and .catch() as needed.
Dismissing Toasts
toast.dismiss()
Dismiss a toast programmatically:
toast.dismiss(toastId?: string): void
Optional. The ID of the toast to dismiss. If omitted, dismisses all toasts.
Dismiss Specific
Dismiss All
const id = toast.loading('Processing...');
// Later, dismiss this specific toast
toast.dismiss(id);
// Dismiss all active toasts
toast.dismiss();
toast.remove()
Immediately remove a toast without animation:
toast.remove(toastId?: string): void
Optional. The ID of the toast to remove. If omitted, removes all toasts.
toast.remove() skips the exit animation. Use toast.dismiss() for a smoother user experience.
// Remove specific toast immediately
const id = toast('Hello');
toast.remove(id);
// Remove all toasts immediately
toast.remove();
Advanced Usage
Dynamic Messages
toast((t) => (
<div>
<p>Toast ID: {t.id}</p>
<p>Created at: {new Date(t.createdAt).toLocaleTimeString()}</p>
<button onClick={() => toast.dismiss(t.id)}>Dismiss</button>
</div>
));
Updating Toasts
const id = toast.loading('Uploading...');
// Update the same toast
setTimeout(() => {
toast.success('Upload complete!', { id });
}, 3000);
By passing the same id in options, you can update an existing toast instead of creating a new one.
Custom Duration
// Short duration
toast('Quick message', { duration: 1000 });
// Persist until manually dismissed
toast('Important notice', { duration: Infinity });
Default Durations
Each toast type has a default duration:
| Type | Duration |
|---|
blank | 4000ms |
success | 2000ms |
error | 4000ms |
loading | Infinity |
custom | 4000ms |
See Also