Sonner

An opinionated toast component.

"use client"

import { toast } from "sonner"

import { Button } from "@/components/cubix/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

Cubix Sonner wraps the Sonner toast library by Emil Kowalski, themed with Cubix tokens.

Installation

pnpm dlx cubix@latest add sonner

Add the Toaster

Place Toaster in your root layout so toasts can render from anywhere.

app/layout.tsx

import { Toaster } from "@/components/cubix/sonner"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}

Usage

Import

import { toast } from "sonner"

Example

toast("Event has been created.")

Types

<div className="flex flex-wrap gap-2">
  <Button variant="outline" onClick={() => toast("Event has been created")}>
    Default
  </Button>
  <Button
    variant="outline"
    onClick={() => toast.success("Event has been created")}
  >
    Success
  </Button>
  <Button
    variant="outline"
    onClick={() =>
      toast.info("Be at the area 10 minutes before the event time")
    }
  >
    Info
  </Button>
  <Button
    variant="outline"
    onClick={() =>
      toast.warning("Event start time cannot be earlier than 8am")
    }
  >
    Warning
  </Button>
  <Button
    variant="outline"
    onClick={() => toast.error("Event has not been created")}
  >
    Error
  </Button>
  <Button
    variant="outline"
    onClick={() => {
      toast.promise<{ name: string }>(
        () =>
          new Promise((resolve) =>
            setTimeout(() => resolve({ name: "Event" }), 2000)
          ),
        {
          loading: "Loading...",
          success: (data) => `${data.name} has been created`,
          error: "Error",
        }
      )
    }}
  >
    Promise
  </Button>
</div>

Description

<Button
  variant="outline"
  onClick={() =>
    toast("Event has been created", {
      description: "Monday, January 3rd at 6:00pm",
    })
  }
>
  Show Toast
</Button>

Position

Use the position prop to change where the toast appears.

<Button
  variant="outline"
  onClick={() =>
    toast("Event has been created", { position: "top-left" })
  }
>
  Top Left
</Button>

API Reference

See also the Sonner API Reference for toast helpers and options.

Toaster

Prop	Type	Default	Description
theme	"light" \| "dark" \| "system"	"system"	Toast theme. Cubix wires this to next-themes by default.
position	"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"	"bottom-right"	Default position for toasts rendered by this toaster.
richColors	boolean	false	Use richer colors for success, info, warning, and error.
expand	boolean	false	Expand stacked toasts by default.
duration	number	-	Default duration in milliseconds before a toast auto-dismisses.
closeButton	boolean	false	Show a close button on toasts.
className	string	-	Additional Tailwind classes merged with the toaster styles (last one wins).