# 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
