Skip to main content
This guide will help you create your first toast notification with Solid Toast.

​
Basic setup

1

Import the components

Import the toast function and Toaster component from solid-toast:
import toast, { Toaster } from 'solid-toast';
2

Add the Toaster component

Add the <Toaster /> component to your app’s component tree. This component renders all active toasts:
const App = () => {
  return (
    <div>
      <Toaster />
      {/* Your app content */}
    </div>
  );
};
You only need one <Toaster /> component in your app. Place it at the root level for best results.
3

Trigger your first toast

Call the toast() function from anywhere in your app to show a notification:
const notify = () => toast('Here is your toast.');

const App = () => {
  return (
    <div>
      <button onClick={notify}>Make me a toast</button>
      <Toaster />
    </div>
  );
};

​
Complete example

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

const App: Component = () => {
  const popBlank = () => toast('Blank Toast');
  const popSuccess = () => toast.success('Success!');
  const popError = () => toast.error('Error!');
  const popLoading = () => toast.loading('Loading...');

  return (
    <div>
      <Toaster position="top-center" />
      <h1>Solid Toast Examples</h1>
      <div style={{ display: 'flex', gap: '0.5rem' }}>
        <button onClick={popBlank}>Blank Toast</button>
        <button onClick={popSuccess}>Success Toast</button>
        <button onClick={popError}>Error Toast</button>
        <button onClick={popLoading}>Loading Toast</button>
      </div>
    </div>
  );
};

export default App;

​
Toast positioning

Control where toasts appear on screen using the position prop: 
<Toaster position="top-center" />
Available positions:
  • top-left
  • top-center (default)
  • top-right
  • bottom-left
  • bottom-center
  • bottom-right

​
Customizing duration

Set how long toasts stay visible (in milliseconds): 
toast('This will last 5 seconds', { duration: 5000 });
You can also set default duration for all toasts: 
<Toaster
  toastOptions={{
    duration: 5000,
  }}
/>

​
What’s next?

Now that you’ve created your first toast, explore more features:

Toast types

Learn about all available toast variants

Customization

Style toasts to match your design

Promise API

Handle async operations with toasts

Toaster options

Configure the Toaster component

Build docs developers (and LLMs) love

Get started for freeTalk to us