Sonner

An opinionated toast component for React.

import { toast } from 'sonner'
import { Button } from 'ui'
 
export function SonnerDemo() {
  return (
    <Button
      variant="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.')

When to use

Use a toast for short-lived, non-blocking feedback or to confirm an operation after its originating surface has closed or navigated away.

Do not use a toast as the only feedback for:

Field validation. Use FormMessage or FieldError beside the field.
A failed submission that leaves the form or interstitial visible. Show a role="alert" message in destructive text near the actions.
A blocking or materially changed page state. Use an inline state component such as Admonition or ErrorDisplay.

Keep error copy specific and include the next step when it is not obvious.

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

PreviousSidebar

NextSuccess Check