Sonner

An opinionated toast component for React.

tsx

"use client"

import { toast } from "sonner"
import { Button } from "@/components/ui/button"

export function SonnerDemo() {
  return (
    <Button
      variant="outline"
      onClick={() =>
        toast("Event has been created", {
          description: "Sunday, December 03, 2023 at 9:00 AM",
          action: {
            label: "Undo",
            onClick: () => console.log("Undo"),
          },
        })
      }
    >
      Show Toast
    </Button>
  )
}

About

Sonner is built and maintained by emilkowalski_.

Installation

CLI

bash

npx fivui add sonner

Manual

Install the following dependencies:

bash

npm install sonner next-themes

Add the Toaster component to your 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

tsx

import { toast } from "sonner"

tsx

toast("Event has been created.")

Examples

Toast Types

Different types of toast notifications.

Toast Types

Click buttons to see different toast types

tsx

import { toast } from "sonner"
import { Button } from "@/components/ui/button"

export function SonnerTypes() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button onClick={() => toast("Default toast")}>
        Default
      </Button>
      <Button onClick={() => toast.success("Success toast")}>
        Success
      </Button>
      <Button onClick={() => toast.error("Error toast")}>
        Error
      </Button>
      <Button onClick={() => toast.warning("Warning toast")}>
        Warning
      </Button>
      <Button onClick={() => toast.info("Info toast")}>
        Info
      </Button>
    </div>
  )
}

Promise Toast

Toast that updates based on a promise state.

Promise Toast

Shows loading, success, or error states

tsx

import { toast } from "sonner"
import { Button } from "@/components/ui/button"

export function SonnerPromise() {
  return (
    <Button
      onClick={() => {
        const promise = () => new Promise((resolve) => setTimeout(resolve, 2000));
        
        toast.promise(promise, {
          loading: 'Loading...',
          success: 'Data loaded successfully!',
          error: 'Error loading data',
        });
      }}
    >
      Promise Toast
    </Button>
  )
}

API Reference

toast()

Parameter	Type	Description
message	string	The main toast message
options	object	Toast configuration options

Toast Options

Option	Type	Description
description	string	Additional description text
action	object	Action button configuration
duration	number	Auto dismiss duration in ms
cancel	object	Cancel button configuration

Toaster

Prop	Type	Default	Description
theme	string	system	Theme mode (light, dark, system)
position	string	bottom-right	Toast position on screen
expand	boolean	false	Expand toasts by default

External Documentation

For more advanced usage and configuration options, visit the Sonner documentation.