Sonner

An opinionated toast component for React.

Loading…

"use client"

import { toast } from "sonner"

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

const TOASTER_ID = "sonner-demo"

export default function SonnerDemo() {
  return (
    <>
      <Toaster id={TOASTER_ID} />
      <Button
        variant="outline"
        onClick={() =>
          toast("Event has been created", {
            toasterId: TOASTER_ID,
            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

pnpm dlx shadcn@latest add @kickresume/sonner

Usage

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

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

Examples

Types

Loading…

"use client"

import { toast } from "sonner"

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

const TOASTER_ID = "sonner-types"

export default function SonnerTypes() {
  return (
    <>
      <Toaster id={TOASTER_ID} />
      <div className="flex flex-wrap gap-2">
        <Button
          variant="outline"
          onClick={() => toast("Default!", { toasterId: TOASTER_ID })}
        >
          Default
        </Button>
        <Button
          variant="outline"
          onClick={() => toast.success("Success!", { toasterId: TOASTER_ID })}
        >
          Success
        </Button>
        <Button
          variant="outline"
          onClick={() => toast.info("Info!", { toasterId: TOASTER_ID })}
        >
          Info
        </Button>
        <Button
          variant="outline"
          onClick={() => toast.warning("Warning!", { toasterId: TOASTER_ID })}
        >
          Warning
        </Button>
        <Button
          variant="outline"
          onClick={() => toast.error("Error!", { toasterId: TOASTER_ID })}
        >
          Error
        </Button>
        <Button
          variant="outline"
          onClick={() => {
            toast.promise<{ name: string }>(
              () =>
                new Promise((resolve) =>
                  setTimeout(() => resolve({ name: "Event" }), 2000)
                ),
              {
                toasterId: TOASTER_ID,
                loading: "Loading...",
                success: (data) => `${data.name} has been created`,
                error: "Error",
              }
            )
          }}
        >
          Promise
        </Button>
      </div>
    </>
  )
}

Description

Loading…

"use client"

import { toast } from "sonner"

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

const TOASTER_ID = "sonner-description"

export default function SonnerDescription() {
  return (
    <>
      <Toaster id={TOASTER_ID} />
      <Button
        onClick={() =>
          toast("Event has been created", {
            toasterId: TOASTER_ID,
            description: "Monday, January 3rd at 6:00pm",
          })
        }
        variant="outline"
        className="w-fit"
      >
        Show Toast
      </Button>
    </>
  )
}

Position

Use the position prop to change the position of the toast.

Loading…

"use client"

import { toast } from "sonner"

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

const TOASTER_ID = "sonner-position"

export default function SonnerPosition() {
  return (
    <>
      <Toaster id={TOASTER_ID} />
      <div className="flex flex-wrap justify-center gap-2">
        <Button
          variant="outline"
          onClick={() =>
            toast("Event has been created", {
              toasterId: TOASTER_ID,
              position: "top-left",
            })
          }
        >
          Top Left
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            toast("Event has been created", {
              toasterId: TOASTER_ID,
              position: "top-center",
            })
          }
        >
          Top Center
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            toast("Event has been created", {
              toasterId: TOASTER_ID,
              position: "top-right",
            })
          }
        >
          Top Right
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            toast("Event has been created", {
              toasterId: TOASTER_ID,
              position: "bottom-left",
            })
          }
        >
          Bottom Left
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            toast("Event has been created", {
              toasterId: TOASTER_ID,
              position: "bottom-center",
            })
          }
        >
          Bottom Center
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            toast("Event has been created", {
              toasterId: TOASTER_ID,
              position: "bottom-right",
            })
          }
        >
          Bottom Right
        </Button>
      </div>
    </>
  )
}

API Reference

See the Sonner API Reference for more information.