Neo Delete Button Variants

React Code

"use client";

import React, { useState } from "react";
import { motion } from "framer-motion";

export interface NeoDeleteButtonProps {
  variant?: "keep-text" | "slide-icon";
}

export function NeoDeleteButton({ variant = "keep-text" }: NeoDeleteButtonProps) {
  const [isHovered, setIsHovered] = useState(false);

  // Gentle spring animation for both variants
  const springConfig = {
    type: "spring" as const,
    stiffness: 150,
    damping: 20,
    mass: 0.8,
  };

  return (
    <motion.button
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      whileTap={{ scale: 0.95 }}
      className="relative flex h-[30px] w-[123px] items-center overflow-hidden rounded-[7px] border border-[#1F2123] bg-white shadow-[4px_4px_0px_0px_black] transition-shadow hover:shadow-[2px_2px_0px_0px_black] active:shadow-none"
    >
      {/* Grey expanding box */}
      <motion.div
        initial={false}
        animate={{
          width: isHovered ? "100%" : "36px",
        }}
        transition={springConfig}
        className="absolute right-0 top-0 bottom-0 bg-[#E6E9EC]"
      />

      {/* Text "Delete" */}
      <motion.span
        initial={false}
        animate={{
          x: variant === "slide-icon" && isHovered ? -80 : 0,
        }}
        transition={springConfig}
        className="absolute left-[23px] font-sans text-[16px] font-medium leading-[1.2] text-black"
      >
        Delete
      </motion.span>

      {/* Trash Icon */}
      <motion.div
        initial={false}
        animate={{
          x: variant === "slide-icon" && isHovered ? -43.5 : 0,
        }}
        transition={springConfig}
        className="absolute right-[9px] z-10 flex size-[18px] items-center justify-center"
      >
        <svg
          width="13"
          height="16"
          viewBox="0 0 13 16"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M11.3879 8.58462L11.8831 8.65354V8.65354L11.3879 8.58462ZM11.1911 9.99839L11.6864 10.0673V10.0673L11.1911 9.99839ZM1.80885 9.99839L2.30408 9.92947V9.92947L1.80885 9.99839ZM1.6121 8.58462L1.11687 8.65354V8.65354L1.6121 8.58462ZM4.38773 15.3026L4.19334 15.7633H4.19334L4.38773 15.3026ZM2.35631 12.9202L2.82564 12.7478V12.7478L2.35631 12.9202ZM10.6437 12.9202L11.113 13.0927V13.0927L10.6437 12.9202ZM8.61226 15.3026L8.41787 14.842V14.842L8.61226 15.3026ZM1.74776 5.70271C1.72164 5.4278 1.47761 5.22612 1.20271 5.25224C0.927802 5.27836 0.726122 5.52239 0.752242 5.79729L1.25 5.75L1.74776 5.70271ZM12.2478 5.79729C12.2739 5.52239 12.0722 5.27836 11.7973 5.25224C11.5224 5.22612 11.2784 5.4278 11.2522 5.70271L11.75 5.75L12.2478 5.79729ZM12.5 4.75C12.7761 4.75 13 4.52614 13 4.25C13 3.97386 12.7761 3.75 12.5 3.75V4.25V4.75ZM0.5 3.75C0.223858 3.75 0 3.97386 0 4.25C0 4.52614 0.223858 4.75 0.5 4.75V4.25V3.75ZM4.5 12.5C4.5 12.7761 4.72386 13 5 13C5.27614 13 5.5 12.7761 5.5 12.5H5H4.5ZM5.5 6.5C5.5 6.22386 5.27614 6 5 6C4.72386 6 4.5 6.22386 4.5 6.5H5H5.5ZM7.5 12.5C7.5 12.7761 7.72386 13 8 13C8.27614 13 8.5 12.7761 8.5 12.5H8H7.5ZM8.5 6.5C8.5 6.22386 8.27614 6 8 6C7.72386 6 7.5 6.22386 7.5 6.5H8H8.5ZM9.5 4.25V4.75H10V4.25H9.5ZM3.5 4.25H3V4.75H3.5V4.25ZM11.3879 8.58462L10.8927 8.5157L10.6959 9.92947L11.1911 9.99839L11.6864 10.0673L11.8831 8.65354L11.3879 8.58462ZM1.80885 9.99839L2.30408 9.92947L2.10733 8.5157L1.6121 8.58462L1.11687 8.65354L1.31362 10.0673L1.80885 9.99839ZM6.5 15.5V15C5.35874 15 4.93423 14.9905 4.58213 14.842L4.38773 15.3026L4.19334 15.7633C4.7767 16.0095 5.44857 16 6.5 16V15.5ZM1.80885 9.99839L1.31362 10.0673C1.52385 11.5779 1.63711 12.4126 1.88699 13.0927L2.35631 12.9202L2.82564 12.7478C2.62211 12.1938 2.52152 11.4919 2.30408 9.92947L1.80885 9.99839ZM4.38773 15.3026L4.58213 14.842C3.86998 14.5414 3.21667 13.8121 2.82564 12.7478L2.35631 12.9202L1.88699 13.0927C2.34383 14.3361 3.15615 15.3256 4.19334 15.7633L4.38773 15.3026ZM11.1911 9.99839L10.6959 9.92947C10.4785 11.4919 10.3779 12.1938 10.1744 12.7478L10.6437 12.9202L11.113 13.0927C11.3629 12.4126 11.4761 11.5779 11.6864 10.0673L11.1911 9.99839ZM6.5 15.5V16C7.55143 16 8.2233 16.0095 8.80666 15.7633L8.61226 15.3026L8.41787 14.842C8.06577 14.9905 7.64126 15 6.5 15V15.5ZM10.6437 12.9202L10.1744 12.7478C9.78333 13.8121 9.13002 14.5414 8.41787 14.842L8.61226 15.3026L8.80666 15.7633C9.84385 15.3256 10.6562 14.3361 11.113 13.0927L10.6437 12.9202ZM1.6121 8.58462L2.10733 8.5157C1.94081 7.31917 1.81618 6.42285 1.74776 5.70271L1.25 5.75L0.752242 5.79729C0.823202 6.54414 0.951538 7.46552 1.11687 8.65354L1.6121 8.58462ZM11.3879 8.58462L11.8831 8.65354C12.0485 7.46551 12.1768 6.54414 12.2478 5.79729L11.75 5.75L11.2522 5.70271C11.1838 6.42285 11.0592 7.31917 10.8927 8.5157L11.3879 8.58462ZM12.5 4.25V3.75H0.5V4.25V4.75H12.5V4.25ZM5 12.5H5.5V6.5H5H4.5V12.5H5ZM8 12.5H8.5V6.5H8H7.5V12.5H8ZM9.5 3.5H9V4.25H9.5H10V3.5H9.5ZM9.5 4.25V3.75H3.5V4.25V4.75H9.5V4.25ZM3.5 4.25H4V3.5H3.5H3V4.25H3.5ZM6.5 0.5V1C7.88071 1 9 2.11929 9 3.5H9.5H10C10 1.567 8.433 0 6.5 0V0.5ZM6.5 0.5V0C4.567 0 3 1.567 3 3.5H3.5H4C4 2.11929 5.11929 1 6.5 1V0.5Z"
            fill="#2D264B"
          />
        </svg>
      </motion.div>
    </motion.button>
  );
}

export function NeoDeleteButtonShowcase() {
  return (
    <div className="flex flex-col items-center gap-8 p-8">
      <div className="flex flex-col items-center gap-2">
        <span className="text-sm text-gray-500 font-medium">Keep Text Variant</span>
        <NeoDeleteButton variant="keep-text" />
      </div>
      <div className="flex flex-col items-center gap-2">
        <span className="text-sm text-gray-500 font-medium">Slide Icon Variant</span>
        <NeoDeleteButton variant="slide-icon" />
      </div>
    </div>
  );
}