Toast

"use client";

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

export default function Basic() {
  return (
    <Button
      variant="outline"
      onClick={() =>
        toast("You are on the latest version.", {
          description: "We have updated the app to the latest version.",
          action: {
            label: "Undo",
            onClick: () => console.log("Undo"),
          },
        })
      }
    >
      Show Toast
    </Button>
  );
}

"use client";

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

export default function Position() {
  return (
    <>
      <Button
        variant="outline"
        onClick={() => toast("This is a toast.", { position: "top-left" })}
      >
        top-left
      </Button>

      <Button
        variant="outline"
        onClick={() => toast("This is a toast.", { position: "top-center" })}
      >
        top-center
      </Button>

      <Button
        variant="outline"
        onClick={() => toast("This is a toast.", { position: "top-right" })}
      >
        top-right
      </Button>

      <Button
        variant="outline"
        onClick={() => toast("This is a toast.", { position: "bottom-left" })}
      >
        bottom-left
      </Button>

      <Button
        variant="outline"
        onClick={() => toast("This is a toast.", { position: "bottom-center" })}
      >
        bottom-center
      </Button>

      <Button
        variant="outline"
        onClick={() => toast("This is a toast.", { position: "bottom-right" })}
      >
        bottom-right
      </Button>
    </>
  );
}

"use client";

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

export default function Types() {
  return (
    <>
      <Button
        variant="outline"
        onClick={() =>
          toast("You are on the latest version.", {
            description: "We have updated the app to the latest version.",
          })
        }
      >
        Description
      </Button>

      <Button
        variant="outline"
        onClick={() => toast.success("You are on the latest version.")}
      >
        Success
      </Button>

      <Button
        variant="outline"
        onClick={() => toast.info("You are on the latest version.")}
      >
        Info
      </Button>

      <Button
        variant="outline"
        onClick={() => toast.warning("You are on the latest version.")}
      >
        Warning
      </Button>

      <Button
        variant="outline"
        onClick={() => toast.error("You are on the latest version.")}
      >
        Error
      </Button>

      <Button
        variant="outline"
        onClick={() =>
          toast("You are on the latest version.", {
            action: {
              label: "Undo",
              onClick: () => console.log("Undo"),
            },
          })
        }
      >
        Action
      </Button>
    </>
  );
}