solid-sonner

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