Skip to main content

​
Simple Toast Notifications

The most basic way to show a toast notification: 
import toast from 'solid-toast';

const notify = () => toast('Here is your toast.');

​
Toast Types

Solid Toast provides several built-in toast types for common use cases. 
toast('This is a blank toast!');
Blank toasts are the default type with no icon. Use them for neutral messages.

​
Positioning Toasts

Control where toasts appear on the screen with the position option. 
// Position individual toasts
toast('Top Right', { position: 'top-right' });
toast('Top Center', { position: 'top-center' });
toast('Top Left', { position: 'top-left' });
toast('Bottom Right', { position: 'bottom-right' });
toast('Bottom Center', { position: 'bottom-center' });
toast('Bottom Left', { position: 'bottom-left' });

​
Duration Customization

Control how long toasts remain visible on screen. 
// Show for 5 seconds
toast('This will disappear after 5 seconds', {
  duration: 5000
});

// Show indefinitely
toast.success('This will stay until dismissed', {
  duration: Infinity
});

// Use default durations (varies by type)
toast('Default: 4000ms');
toast.success('Default: 2000ms');
toast.error('Default: 4000ms');
toast.loading('Default: Infinity');
Default durations by type:
  • Blank: 4000ms
  • Success: 2000ms
  • Error: 4000ms
  • Loading: Infinity
  • Custom: 4000ms

​
Setting Default Options

Configure default options for all toasts using the Toaster component: 
import toast, { Toaster } from 'solid-toast';

const App = () => {
  return (
    <div>
      <Toaster
        position="top-center"
        gutter={8}
        toastOptions={{
          duration: 5000,
          style: {
            background: '#363636',
            color: '#fff',
          },
          className: 'my-toast',
        }}
      />
      {/* Your app content */}
    </div>
  );
};

​
Complete Example

Here’s a complete example showing basic toast usage: 
import { Component } from 'solid-js';
import toast, { Toaster } from 'solid-toast';

const App: Component = () => {
  const showBlank = () => toast('Blank Toast');
  const showSuccess = () => toast.success('Success!');
  const showError = () => toast.error('Error!');
  const showLoading = () => toast.loading('Loading...');
  
  return (
    <div>
      <Toaster position="top-center" />
      <h1>Solid Toast Examples</h1>
      
      <button onClick={showBlank}>Blank Toast</button>
      <button onClick={showSuccess}>Success Toast</button>
      <button onClick={showError}>Error Toast</button>
      <button onClick={showLoading}>Loading Toast</button>
    </div>
  );
};

export default App;

Build docs developers (and LLMs) love

Get started for freeTalk to us