Installation
npm install sonner
Usage
Render the toaster in the root of your app.
import { Toaster, toast } from 'sonner'// ...function App() {return (<div><Toaster /><button onClick={() => toast('My first toast')}>Give me a toast</button></div>)}
Types
You can customize the type of toast you want to render, and pass an options object as the second argument.
toast('Event has been created')
Position
Swipe direction changes depending on the position.
<Toaster position="bottom-right" />
Expand
You can change the amount of toasts visible through the visibleToasts
prop.
<Toaster expand={false} />
Other
toast.success('Event has been created')// ...<Toaster richColors />
Advanced custom styling
This example uses Tailwind class names, but you can use any CSS classes.
toast('Event has been created', {description: 'Monday, January 3rd at 6:00pm',icon: <span className="text-2xl">📆</span>,action: {label: 'Action',},// Remove default stylingunstyled: true,// Add custom class namesclassNames: {toast: 'border rounded-md p-4 w-full bg-white shadow-lg gap-2 flex',title: 'font-bold',actionButton: 'bg-black/10 px-3 py-1 rounded-md shrink-0 self-end',closeButton: 'bg-red-200 absolute top-4 right-4 rounded-full p-1',},});
You can also pass the classNames
to the Toaster if you want to style all toasts the same way.
<Toaster toastOptions={{unstyled: true,classNames: {// ...},}} />
How is it made?
You can read about why and how it was built here.