"use client";

import { useState } from "react";
import { AnimatePresence, motion } from "motion/react";
import { Loader2 } from "lucide-react";

const buttonCopy = {
  idle: "Send me a login link",
  success: "Login link sent",
  loading: <Loader2 className="size-4 animate-spin" />,
};

type ButtonState = keyof typeof buttonCopy;

const buttonContentVariants = {
  initial: {
    opacity: 0,
    y: -25,
  },
  animate: {
    opacity: 1,
    y: 0,
  },
  exit: {
    opacity: 0,
    y: 25,
  },
};

export const ButtonWithStates = () => {
  const [buttonState, setButtonState] = useState<ButtonState>("idle");

  const handleClick = () => {
    setButtonState("loading");
    setTimeout(() => {
      setButtonState("success");
    }, 1750);

    setTimeout(() => {
      setButtonState("idle");
    }, 3500);
  };

  return (
    <button
      className="rounded-lg text-sm h-[32px] w-[148px] overflow-hidden [background:linear-gradient(180deg,var(--blue-9),var(--blue-10))] relative cursor-pointer disabled:cursor-not-allowed"
      onClick={handleClick}
      disabled={buttonState === "loading" || buttonState === "success"}
    >
      <AnimatePresence mode="popLayout" initial={false}>
        <motion.span
          key={buttonState}
          variants={buttonContentVariants}
          transition={{
            bounce: 0,
            type: "spring",
            duration: 0.3,
          }}
          initial="initial"
          animate="animate"
          exit="exit"
          className="flex items-center justify-center h-full w-full text-white"
        >
          {buttonCopy[buttonState]}
        </motion.span>
      </AnimatePresence>
    </button>
  );
};
Simple Button

Button with States

Installation

Button with States

Installation
