solid-sonner

An opinionated toast component for Solid.

This package tracks the React Sonner API as closely as possible while keeping the implementation Solid-friendly.

Install

npm i solid-sonner
# or
yarn add solid-sonner
# or
pnpm add solid-sonner

Quick start

import { Toaster, toast } from 'solid-sonner';

export default function App() {
  return (
    <div>
      <Toaster />
      <button onClick={() => toast('My first toast')}>Give me a toast</button>
    </div>
  );
}

API

Exports:

• Toaster
• toast
• useSonner
• types: Action, ExternalToast, ToastClassnames, ToastT, ToastToDismiss, ToasterProps

Toast types

toast('Event has been created');
toast.success('Event has been created');
toast.info('Event has new information');
toast.warning('Event has warning');
toast.error('Event has not been created');
toast.loading('Loading data');

With description, icon, and actions:

toast('Event has been created', {
  description: 'Monday, January 3rd at 6:00pm',
  icon: <MyIcon />,
  action: {
    label: 'Undo',
    onClick: () => console.log('Undo'),
  },
  cancel: {
    label: 'Cancel',
  },
});

Promise toasts

toast.promise(fetchData(), {
  loading: 'Loading...',
  success: (data) => `${data.name} has been added!`,
  error: 'Error',
});

Extended results are supported too:

toast.promise(saveProject(), {
  loading: 'Saving...',
  success: (result) => ({
    message: 'Project saved',
    description: result.id,
  }),
  error: (error) => ({
    message: 'Save failed',
    description: String(error),
  }),
});

Updating and dismissing

const id = toast('Uploading...', { duration: Number.POSITIVE_INFINITY });

toast.success('Done', { id });
toast.dismiss(id);
toast.dismiss();

Headless custom toasts

toast.custom((id) => (
  <div>
    Custom toast <button onClick={() => toast.dismiss(id)}>close</button>
  </div>
));

Read current state

const { toasts } = useSonner();

toast.getToasts();
toast.getHistory();

Toaster props

<Toaster
  theme="system"
  position="top-right"
  richColors
  closeButton
  expand
  visibleToasts={5}
  duration={5000}
  gap={14}
  offset={32}
  mobileOffset={{ bottom: 24, left: 16, right: 16 }}
  hotkey={['altKey', 'KeyT']}
  dir="auto"
  swipeDirections={['top', 'right']}
  containerAriaLabel="Notifications"
  toastOptions={{
    className: 'my-toast',
    descriptionClassName: 'my-toast-description',
    closeButtonAriaLabel: 'Close notification',
    classNames: {
      toast: 'toast',
      title: 'title',
      description: 'description',
    },
  }}
/>

Legacy aliases from older solid-sonner versions still work for compatibility:

• class -> className
• classes -> classNames
• descriptionClass -> descriptionClassName

Multiple toasters

<>
  <Toaster />
  <Toaster id="sidebar" position="top-left" />
</>;

toast('Global toast');
toast('Sidebar toast', { toasterId: 'sidebar' });

Tailwind / unstyled mode

<Toaster
  toastOptions={{
    unstyled: true,
    classNames: {
      toast: 'bg-blue-500 text-white',
      title: 'font-semibold',
      description: 'text-blue-100',
      actionButton: 'bg-white text-blue-700',
      cancelButton: 'bg-blue-700 text-white',
      closeButton: 'bg-white text-black',
    },
  }}
/>

Notes

• pauseWhenPageIsHidden is available and defaults to Sonner-like hidden-page pausing behavior
• Per-toast closeButton, dismissible, richColors, testId, and toasterId are supported
• action respects event.preventDefault() and will keep the toast open

License

MIT