| import React from "react"; |
| import { motion } from "framer-motion"; |
| import { Loader2 } from "lucide-react"; |
|
|
| export function Button({ |
| children, |
| variant = "primary", // primary | secondary | ghost | danger | success | icon |
| size = "md", // sm | md | lg |
| loading = false, |
| disabled = false, |
| onClick, |
| className = "", |
| type = "button", |
| icon: IconComponent, |
| iconPosition = "left", |
| fullWidth = false, |
| style = {}, |
| ...props |
| }) { |
| const isIconButton = variant === "icon"; |
|
|
| const getVariantStyles = () => { |
| switch (variant) { |
| case "secondary": |
| return { |
| background: "var(--bg-elevated)", |
| color: "var(--text-primary)", |
| border: "1px solid var(--border)", |
| }; |
| case "ghost": |
| return { |
| background: "transparent", |
| color: "var(--text-secondary)", |
| border: "1px solid transparent", |
| }; |
| case "danger": |
| return { |
| background: "var(--danger-bg)", |
| color: "var(--danger)", |
| border: "1px solid var(--danger-border)", |
| }; |
| case "success": |
| return { |
| background: "var(--success-bg)", |
| color: "var(--success)", |
| border: "1px solid var(--success-border)", |
| }; |
| case "icon": |
| return { |
| background: "var(--bg-surface)", |
| color: "var(--text-secondary)", |
| border: "1px solid var(--border)", |
| padding: "8px", |
| borderRadius: "var(--radius-md)", |
| }; |
| case "primary": |
| default: |
| return { |
| background: "var(--color-teal)", |
| color: "#04241D", |
| border: "1px solid transparent", |
| }; |
| } |
| }; |
|
|
| const getSizeStyles = () => { |
| if (isIconButton) { |
| switch (size) { |
| case "sm": |
| return { padding: "6px", borderRadius: "var(--radius-sm)" }; |
| case "lg": |
| return { padding: "12px", borderRadius: "var(--radius-md)" }; |
| case "md": |
| default: |
| return { padding: "9px", borderRadius: "var(--radius-md)" }; |
| } |
| } |
|
|
| switch (size) { |
| case "sm": |
| return { padding: "6px 12px", fontSize: "12px", borderRadius: "var(--radius-sm)" }; |
| case "lg": |
| return { padding: "12px 24px", fontSize: "15px", borderRadius: "var(--radius-md)" }; |
| case "md": |
| default: |
| return { padding: "9px 18px", fontSize: "13px", borderRadius: "var(--radius-button)" }; |
| } |
| }; |
|
|
| const baseStyle = { |
| display: "inline-flex", |
| alignItems: "center", |
| justifyContent: "center", |
| gap: "8px", |
| fontWeight: 700, |
| fontFamily: "var(--font-sans)", |
| cursor: disabled || loading ? "not-allowed" : "pointer", |
| opacity: disabled ? 0.45 : loading ? 0.8 : 1, |
| width: fullWidth ? "100%" : "auto", |
| boxSizing: "border-box", |
| transition: "background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast)", |
| ...getVariantStyles(), |
| ...getSizeStyles(), |
| ...style, |
| }; |
|
|
| return ( |
| <motion.button |
| type={type} |
| style={baseStyle} |
| onClick={disabled || loading ? undefined : onClick} |
| whileHover={disabled || loading ? undefined : { scale: 1.02 }} |
| whileTap={disabled || loading ? undefined : { scale: 0.98 }} |
| className={`ui-btn btn-${variant} ${className}`.trim()} |
| disabled={disabled || loading} |
| aria-disabled={disabled || loading} |
| aria-busy={loading || undefined} |
| {...props} |
| > |
| {loading ? ( |
| <Loader2 size={size === "sm" ? 14 : size === "lg" ? 18 : 16} className="spin" style={{ animation: "spin 1s linear infinite" }} /> |
| ) : IconComponent && iconPosition === "left" ? ( |
| <IconComponent size={size === "sm" ? 14 : size === "lg" ? 18 : 16} /> |
| ) : null} |
| |
| {!isIconButton && children} |
| |
| {!loading && IconComponent && iconPosition === "right" ? ( |
| <IconComponent size={size === "sm" ? 14 : size === "lg" ? 18 : 16} /> |
| ) : null} |
| </motion.button> |
| ); |
| } |
|
|
| export default Button; |
|
|
