Sonner

Docs

Sonner

An opinionated toast component for React.

import { toast } from 'sonner'
import { Button } from 'ui'
 
export function SonnerDemo() {
  return (
    <Button
      type="default"
      onClick={() =>
        toast('Event has been created', {
          description: 'Sunday, December 03, 2023 at 9:00 AM',
          cancel: {
            label: 'Undo',
            onClick: () => console.log('Undo'),
          },
        })
      }
    >
      Show Toast
    </Button>
  )
}

About

Sonner is built and maintained by emilkowalski_.

Installation

Install the following dependencies:

npm install sonner next-themes

Copy and paste the following code into your project.

Add the Toaster component

app/layout.tsx

import { Toaster } from '@/components/ui/sonner'
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}

Usage

import { toast } from 'sonner'

toast('Event has been created.')

Expand

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

<Toaster expand={true | false} />

You can use the Input below to try it out.

Position

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

<Toaster
  position={
    'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center'
  }
/>

You can use the Input below to try it out.

Types

You can customize the type of toast you want to render, and pass an options object as the second argument.

Upload example

PreviousSlider

NextSwitch