"use client";

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

export type AddToCartButtonState = "idle" | "loading" | "success";

const addToCartButtonVariants = cva(
  "inline-flex items-center justify-center gap-2 rounded-md font-semibold transition-all focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-60",
  {
    variants: {
      size: {
        sm: "h-9 px-3 text-sm",
        md: "h-10 px-4 text-sm",
        lg: "h-12 px-6 text-base",
      },
      variant: {
        default: "border border-border bg-muted text-foreground hover:opacity-90",
        primary: "bg-primary text-background hover:opacity-90",
      },
    },
    defaultVariants: {
      size: "md",
      variant: "default",
    },
  }
);

export interface AddToCartButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof addToCartButtonVariants> {
  state?: AddToCartButtonState;
  idleLabel?: string;
  loadingLabel?: string;
  successLabel?: string;
}

function CartIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      aria-hidden="true"
    >
      <circle cx="8" cy="21" r="1" />
      <circle cx="19" cy="21" r="1" />
      <path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" />
    </svg>
  );
}

function SpinnerIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      className={cn("animate-spin", className)}
      aria-hidden="true"
    >
      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
    </svg>
  );
}

function CheckIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      aria-hidden="true"
    >
      <polyline points="20 6 9 17 4 12" />
    </svg>
  );
}

export function AddToCartButton({
  state = "idle",
  idleLabel = "Add to cart",
  loadingLabel = "Adding",
  successLabel = "Added",
  size,
  variant,
  className,
  disabled,
  ...props
}: AddToCartButtonProps) {
  const isLoading = state === "loading";
  const isSuccess = state === "success";

  const label = React.useMemo(() => {
    if (isLoading) return loadingLabel;
    if (isSuccess) return successLabel;
    return idleLabel;
  }, [state, idleLabel, loadingLabel, successLabel, isLoading, isSuccess]);

  const icon = React.useMemo(() => {
    if (isLoading) return <SpinnerIcon className="h-4 w-4" />;
    if (isSuccess) return <CheckIcon className="h-4 w-4" />;
    return <CartIcon className="h-4 w-4" />;
  }, [isLoading, isSuccess]);

  return (
    <button
      type="button"
      className={cn(addToCartButtonVariants({ size, variant, className }))}
      disabled={disabled || isLoading}
      aria-busy={isLoading}
      {...props}
    >
      {icon}
      <span>{label}</span>
    </button>
  );
}
Add to Cart Button

Dependencies

Files

Installation
