Skip to main content
Solid Toast provides multiple ways to create notifications based on your needs. Each toast type comes with its own icon and styling.

​
Basic Toast Types

​
Blank Toast

Create a simple toast without any default icon: 
import toast from 'solid-toast';

toast('This is a blank toast!');
Blank toasts are perfect when you want complete control over the appearance or want to add a custom icon.

​
Success Toast

Show a success notification with an animated checkmark: 
toast.success('Successfully saved!');
The success toast automatically includes an animated checkmark icon. You can customize the icon colors using the iconTheme option.

​
Error Toast

Display an error notification with an animated error icon: 
toast.error('Something went wrong!');
Error toasts are ideal for displaying validation errors, failed requests, or any error state.

​
Loading Toast

Show a loading state with a spinner icon: 
toast.loading('Loading Photos...');
Loading toasts have an infinite duration by default and are typically updated later with success or error states. See the Updating Toasts guide for more details.

​
Custom Toasts

​
Custom Icon

Add a custom icon (emoji or JSX element) to any toast: 
toast('Ice cream is ready!', {
  icon: '🍦',
});

​
Custom JSX Toast

Create a completely custom toast with JSX: 
toast.custom(() => (
  <div>
    <h1>Custom Toast</h1>
    <p>This is a custom toast!</p>
  </div>
));

​
Advanced Custom Toast

Access the toast lifecycle and properties: 
toast.custom(
  (t) => (
    <div>
      <h1>Custom Toast</h1>
      <p>This is a custom toast!</p>
      <p>{t.visible ? 'Showing' : 'I will close in 1 second'}</p>
      <button onClick={() => toast.dismiss(t.id)}>Close Toast</button>
    </div>
  ),
  {
    unmountDelay: 1000,
  }
);

​
Toast Options

All toast types accept options as the second argument: 
toast('This is a simple toast!', {
  duration: 5000,
  position: 'top-right',
  unmountDelay: 500,
  icon: '🍩',
});

​
Common Options

  • duration: How long the toast should be visible (in milliseconds)
  • position: Where to display the toast ('top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right')
  • unmountDelay: Delay before removing the toast from DOM after dismissal (useful for exit animations)
  • icon: Custom icon (emoji string or JSX element)
  • id: Custom ID for updating the toast later
For styling options, see the Styling Guide.

​
Default Durations

Each toast type has a default duration:
  • Blank: 4000ms (4 seconds)
  • Success: 2000ms (2 seconds)
  • Error: 4000ms (4 seconds)
  • Loading: Infinity (must be dismissed manually)
  • Custom: 4000ms (4 seconds)
You can override these by passing a duration option.

Build docs developers (and LLMs) love

Get started for freeTalk to us