# solid-sonner
[](https://pnpm.io/)
An opinionated toast component for Solid.
This package tracks the React [Sonner](https://sonner.emilkowal.ski/) API as closely as possible while keeping the implementation Solid-friendly.
## Install
```bash
npm i solid-sonner
# or
yarn add solid-sonner
# or
pnpm add solid-sonner
```
## Quick start
```tsx
import { Toaster, toast } from 'solid-sonner'
export default function App() {
return (
)
}
```
## API
Exports:
- `Toaster`
- `toast`
- `useSonner`
- types: `Action`, `ExternalToast`, `ToastClassnames`, `ToastT`, `ToastToDismiss`, `ToasterProps`
### Toast types
```tsx
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:
```tsx
toast('Event has been created', {
description: 'Monday, January 3rd at 6:00pm',
icon: ,
action: {
label: 'Undo',
onClick: () => console.log('Undo'),
},
cancel: {
label: 'Cancel',
},
})
```
### Promise toasts
```tsx
toast.promise(fetchData(), {
loading: 'Loading...',
success: data => `${data.name} has been added!`,
error: 'Error',
})
```
Extended results are supported too:
```tsx
toast.promise(saveProject(), {
loading: 'Saving...',
success: result => ({
message: 'Project saved',
description: result.id,
}),
error: error => ({
message: 'Save failed',
description: String(error),
}),
})
```
### Updating and dismissing
```tsx
const id = toast('Uploading...', { duration: Number.POSITIVE_INFINITY })
toast.success('Done', { id })
toast.dismiss(id)
toast.dismiss()
```
### Headless custom toasts
```tsx
toast.custom(id => (
Custom toast
))
```
### Read current state
```tsx
const { toasts } = useSonner()
toast.getToasts()
toast.getHistory()
```
## Toaster props
```tsx
```
Legacy aliases from older `solid-sonner` versions still work for compatibility:
- `class` -> `className`
- `classes` -> `classNames`
- `descriptionClass` -> `descriptionClassName`
## Multiple toasters
```tsx
<>
toast('Global toast')
toast('Sidebar toast', { toasterId: 'sidebar' })
```
## Tailwind / unstyled mode
```tsx
```
## 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
