"use client"

import { toast } from "sonner"

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

export default function SonnerTypes() {
  return (
    <div className="gap-2 flex flex-wrap justify-center">
      <Toaster />
      <Button variant="outline" onClick={() => toast("Draft saved")}>
        Default
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast.error("Build failed", {
            description: "Type error in app/page.tsx",
          })
        }
      >
        Error
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast("Project archived", {
            action: { label: "Undo", onClick: () => {} },
          })
        }
      >
        With action
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast.promise(new Promise((resolve) => setTimeout(resolve, 1500)), {
            loading: "Deploying…",
            success: "Deployed",
            error: "Deploy failed",
          })
        }
      >
        Promise
      </Button>
    </div>
  )
}
Installation

Usage

Examples

Types
