"use client"

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import type { LucideIcon } from "lucide-react"
import { Loader2 } from "lucide-react"
import { motion, useReducedMotion } from "motion/react"

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

const buttonVariants = cva(
  // Base styles matching your design system
  "relative inline-flex items-center justify-center shrink-0 select-none cursor-pointer transition-[transform,color,background-color,border-color] duration-150 motion-reduce:transition-none disabled:opacity-50 disabled:cursor-not-allowed outline-none focus-visible:ring-ring-focus focus-visible:ring-[3px]",
  {
    variants: {
      variant: {
        // Primary: accent background, outline on hover
        default:
          "bg-accent text-accent-foreground border border-transparent rounded-lg text-xs font-semibold hover:bg-transparent hover:border-accent hover:text-accent active:scale-[0.98]",
        // Outline: accent border, accent bg on hover
        outline:
          "bg-transparent text-accent border border-accent rounded-lg text-xs font-semibold hover:bg-accent hover:text-accent-foreground active:scale-[0.98]",
        // Ghost: transparent with accent background on hover
        ghost:
          "bg-transparent text-foreground rounded-lg text-xs font-semibold hover:bg-accent-100 dark:hover:bg-accent-900 hover:text-accent active:scale-[0.98]",
        // Text: inline text link style (hover color controlled via textHover prop)
        text: "bg-transparent text-subtle-foreground font-semibold text-xs transition-colors",
        // Destructive: subtle destructive bg, outline-like on hover
        destructive:
          "bg-destructive text-destructive-foreground border border-transparent rounded-lg text-xs font-semibold hover:bg-destructive-600 active:scale-[0.98]",
        // Subtle: tinted neutral surface for toolbar buttons
        subtle:
          "bg-neutral-500/10 text-foreground border border-transparent rounded-lg text-xs font-semibold hover:bg-neutral-500/15 active:scale-[0.98]",
        // Ghost destructive: transparent with destructive hover (for icon close buttons)
        "ghost-destructive":
          "bg-transparent text-foreground rounded-lg hover:bg-destructive-100 dark:hover:bg-destructive-900 hover:text-destructive active:scale-[0.98]",
        // Link: inline text link for card headers and inline contexts
        link: "bg-transparent text-muted-foreground text-sm normal-case font-normal tracking-normal hover:text-foreground transition-colors duration-150 p-0 h-auto cursor-pointer",
      },
      size: {
        default:
          "h-8 px-4 [&_svg]:size-3 [&_svg]:shrink-0 gap-1.5",
        xs: "h-6 px-2 text-2xs [&_svg]:size-3 [&_svg]:shrink-0 gap-1",
        sm: "h-7 px-3 text-1xs [&_svg]:size-3 [&_svg]:shrink-0 gap-1",
        lg: "h-10 px-6 text-sm [&_svg]:size-3.5 [&_svg]:shrink-0 gap-1.5",
        icon: "size-8 [&_svg]:size-3",
        "icon-sm": "size-6 rounded-md [&_svg]:size-3",
        // Inline: for text buttons that flow with content
        inline:
          "h-auto px-0 gap-1 [&_svg]:size-3 [&_svg]:shrink-0",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

const iconSizeClasses = {
  xs: "[&_svg]:!size-3",
  sm: "[&_svg]:!size-3.5",
  default: "", // uses variant default
  lg: "[&_svg]:!size-5",
  xl: "[&_svg]:!size-6",
} as const

const textHoverClasses = {
  accent: "hover:text-accent",
  destructive: "hover:text-destructive",
  foreground: "hover:text-foreground",
  muted: "hover:text-muted-foreground",
} as const

type ButtonProps = Omit<React.ComponentProps<"button">, "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart"> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
    iconStart?: LucideIcon
    iconEnd?: LucideIcon
    badge?: React.ReactNode
    badgeClassName?: string
    iconSize?: keyof typeof iconSizeClasses
    textHover?: keyof typeof textHoverClasses
    loading?: boolean
    /** Disable Framer Motion layout animation (prevents visual glitch on rapid state changes) */
    layoutAnimation?: boolean
  }

function Button({
  className,
  variant,
  size,
  iconSize,
  textHover,
  badge,
  badgeClassName,
  asChild = false,
  iconStart: IconStart,
  iconEnd: IconEnd,
  loading = false,
  layoutAnimation = true,
  disabled,
  onClick,
  children,
  ...props
}: ButtonProps) {
  const shouldReduceMotion = useReducedMotion()

  // When loading, allow pointer events (for hover states) but block clicks
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    if (loading) {
      e.preventDefault();
      return;
    }
    onClick?.(e);
  };

  // Reduce padding on icon side for visual balance
  const iconPaddingClasses = size !== "icon" && size !== "inline" ? cn(
    IconStart && "pl-3",
    IconEnd && "pr-3"
  ) : undefined

  const buttonClasses = cn(
    buttonVariants({ variant, size, className }),
    "group/button",
    iconSize && iconSizeClasses[iconSize],
    iconPaddingClasses,
    variant === "text" && textHoverClasses[textHover ?? "accent"],
    loading && "pointer-events-auto cursor-wait"
  )

  const resolvedVariant = variant ?? "default"

  const badgeClasses = cn(
    "inline-flex items-center justify-center min-w-4 h-4 rounded-full px-1 text-3xs font-medium transition-colors duration-150",
    resolvedVariant === "default" &&
      "bg-white/20 text-white group-hover/button:bg-accent-100 group-hover/button:text-accent",
    resolvedVariant === "outline" &&
      "bg-accent-100 text-accent group-hover/button:bg-white/20 group-hover/button:text-white",
    resolvedVariant === "ghost" &&
      "bg-accent-100 dark:bg-accent-900 text-accent",
    badgeClassName
  )

  // Loading styles per variant - inline styles for guaranteed specificity
  const getLoadingStyles = (): React.CSSProperties | undefined => {
    if (!loading) return undefined;

    switch (resolvedVariant) {
      case "default":
        // Lock in hover state: transparent bg, accent border & text
        return {
          backgroundColor: "transparent",
          borderColor: "var(--color-accent)",
          color: "var(--color-accent)",
        };
      case "outline":
        // Lock in hover state: accent bg, light text
        return {
          backgroundColor: "var(--color-accent)",
          color: "var(--color-accent-foreground)",
        };
      case "ghost":
        // Lock in hover state: subtle accent bg
        return {
          backgroundColor: "color-mix(in srgb, var(--color-accent) 20%, transparent)",
        };
      case "destructive":
        // Lock in hover state: solid destructive surface
        return {
          backgroundColor: "var(--color-destructive)",
          color: "var(--color-destructive-foreground)",
        };
      default:
        return undefined;
    }
  };

  // Content rendering - use contents class to "unwrap" span when not loading
  const buttonContent = (
    <>
      {IconStart && <IconStart data-position="start" className={loading ? "invisible" : ""} />}
      <span className={cn("[color:inherit] [line-height:inherit] [letter-spacing:inherit]", loading ? "invisible" : "contents")}>{children}</span>
      {badge !== undefined && badge !== null && (
        <span className={cn(badgeClasses, loading && "invisible")}>
          {badge}
        </span>
      )}
      {IconEnd && <IconEnd data-position="end" className={loading ? "invisible" : ""} />}
      {loading && (
        <span className="absolute inset-0 flex items-center justify-center [color:inherit]">
          <Loader2 className="!size-4 animate-spin" />
        </span>
      )}
    </>
  )

  // When using asChild, clone the child element and inject icons into its children
  if (asChild) {
    const child = React.Children.only(children) as React.ReactElement<{
      className?: string
      children?: React.ReactNode
    }>
    return React.cloneElement(child, {
      ...props,
      disabled,
      "aria-busy": loading,
      className: cn(buttonClasses, child.props.className),
      "data-slot": "button",
      children: (
        <>
          {IconStart && <IconStart data-position="start" className={loading ? "invisible" : ""} />}
          <span className={cn("[color:inherit] [line-height:inherit] [letter-spacing:inherit]", loading ? "invisible" : "contents")}>{child.props.children}</span>
          {badge !== undefined && badge !== null && (
            <span className={cn(badgeClasses, loading && "invisible")}>
              {badge}
            </span>
          )}
          {IconEnd && <IconEnd data-position="end" className={loading ? "invisible" : ""} />}
          {loading && (
            <span className="absolute inset-0 flex items-center justify-center [color:inherit]">
              <Loader2 className="!size-4 animate-spin" />
            </span>
          )}
        </>
      ),
    } as React.Attributes & { className: string; children: React.ReactNode; "data-slot": string; disabled?: boolean; "aria-busy"?: boolean })
  }

  return (
    <motion.button
      data-slot="button"
      className={buttonClasses}
      style={getLoadingStyles()}
      disabled={disabled}
      aria-busy={loading}
      onClick={handleClick}
      layout={layoutAnimation && !shouldReduceMotion ? "position" : false}
      transition={{ duration: shouldReduceMotion ? 0 : 0.15, ease: "easeOut" }}
      {...props}
    >
      {buttonContent}
    </motion.button>
  )
}

export { Button, buttonVariants }
export type { ButtonProps }
Search documentation

Button

Installation

Usage

Examples

Default

Variants

Sizes

With Icon

With Badge

Loading
