Installation

Usage

Render the toaster in the root of your app.

import toast from 'sonner-js'

// ...

toast('My first toast')

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')

Theme

You can smoothly switch between light mode and dark mode.

toast.config({ theme: 'light' })

Position

Swipe direction changes depending on the position.

toast('Event has been created', { position: "bottom-right" })

Expand

You can change the amount of toasts visible through the visibleToasts prop.

toast.config({ expand: false })

Other

toast.success('Event has been created', { richColors: true })