Core Types Toast The complete toast object interface.
interface Toast { type : ToastType ; id : string ; message : ValueOrFunction < Renderable , Toast >; icon ?: Renderable ; duration ?: number ; pauseDuration : number ; paused : boolean ; position ?: ToastPosition ; ariaProps : { role : 'status' | 'alert' ; 'aria-live' : 'assertive' | 'off' | 'polite' ; }; style ?: JSX . CSSProperties ; className ?: string ; iconTheme ?: IconTheme ; createdAt : number ; updatedAt ?: number ; visible : boolean ; height ?: number ; unmountDelay : number ; }
The type of toast: 'success', 'error', 'loading', 'blank', or 'custom'.
Unique identifier for the toast.
message
ValueOrFunction<Renderable, Toast>
The message content. Can be a static renderable value or a function that receives the toast object.
Optional custom icon to display.
Time in milliseconds before the toast auto-dismisses.
Accumulated time the toast has been paused.
Whether the toast is currently paused (e.g., on hover).
Where the toast is displayed on screen.
Accessibility attributes for screen readers. aria-live
'assertive' | 'off' | 'polite'
ARIA live region attribute.
Custom CSS styles applied to the toast.
CSS class name applied to the toast.
Theme configuration for the default icon.
Timestamp when the toast was created.
Timestamp when the toast was last updated.
Whether the toast is currently visible.
The computed height of the toast element.
Delay before removing the toast from the DOM after dismissal.
ToastOptions Options for configuring individual toasts.
type ToastOptions = Partial < Pick < Toast , 'id' | 'icon' | 'duration' | 'ariaProps' | 'className' | 'style' | 'position' | 'unmountDelay' | 'iconTheme' > >;
All properties are optional and allow you to customize specific aspects of a toast.
Custom ID for the toast. Useful for updating or dismissing specific toasts.
Auto-dismiss duration in milliseconds.
ARIA attributes for accessibility.
Delay before DOM removal after dismissal.
ToasterProps Props for the <Toaster /> component.
interface ToasterProps { position ?: ToastPosition ; toastOptions ?: DefaultToastOptions ; gutter ?: number ; containerStyle ?: JSX . CSSProperties ; containerClassName ?: string ; }
Default position for all toasts.
Default options applied to all toasts.
Spacing between toasts in pixels.
Custom styles for the container element.
CSS class name for the container element.
Enums and Literals ToastType The type of toast notification.
type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom' ;
'success' - Success notification with checkmark icon'error' - Error notification with error icon'loading' - Loading notification with spinner icon'blank' - Blank notification without default icon'custom' - Custom notification without default icon
ToastPosition Where the toast appears on screen.
type ToastPosition = | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' ;
IconTheme Theme configuration for default toast icons.
interface IconTheme { primary ?: string ; secondary ?: string ; }
Primary color for the icon (typically the main icon color).
Secondary color for the icon (typically the background or accent color).
Utility Types Message Type for toast message content.
type Message = ValueOrFunction < Renderable , Toast >;
Can be a static renderable value or a function that receives the toast object and returns a renderable value.
Renderable Types that can be rendered in a toast.
type Renderable = JSX . Element | string | null ;
ValueOrFunction A value or a function that returns a value.
type ValueOrFunction < TValue , TArg > = TValue | ValueFunction < TValue , TArg >; type ValueFunction < TValue , TArg > = ( arg : TArg ) => TValue ;
Used throughout the API to allow both static values and dynamic functions.
DefaultToastOptions Alias for ToastOptions, used in the context of default options.
type DefaultToastOptions = ToastOptions ;
ToastHandler Function signature for toast creation methods.
type ToastHandler = ( message : Message , options ?: ToastOptions ) => string ;
Returns the ID of the created toast.
Utility Functions resolveValue Helper function to resolve a value that can be either static or a function.
export const resolveValue = < TValue , TArg >( valOrFunction : ValueOrFunction < TValue , TArg >, arg : TArg ): TValue
valOrFunction
ValueOrFunction<TValue, TArg>
Either a static value or a function that returns a value.
The argument to pass to the function if valOrFunction is a function.
Returns : The resolved value of type TValue.Example :import { resolveValue } from 'solid-toast' ; // With a static value const result1 = resolveValue ( 'Hello' , null ); // 'Hello' // With a function const result2 = resolveValue (( t ) => `Toast ${ t . id } ` , { id: '123' }); // 'Toast 123'
This utility is used internally by Solid Toast to support both static messages and dynamic message functions, but it’s also exported for user convenience.
Example Usage import { toast , Toast , ToastOptions , ToasterProps } from 'solid-toast' ; // Using ToastOptions const options : ToastOptions = { duration: 4000 , position: 'top-right' , style: { background: '#333' , color: '#fff' , }, }; toast ( 'Hello' , options ); // Using ToasterProps const toasterProps : ToasterProps = { position: 'bottom-center' , gutter: 16 , toastOptions: { duration: 5000 , }, }; // Dynamic message using Toast type toast (( t : Toast ) => ( < div > Toast ID: { t . id } < br /> Visible: { t . visible ? 'Yes' : 'No' } </ div > ));