wp-optimize
/
vendor
/
team-updraft
/
lib-onboarding-wizard
/
Wizard
/
Onboarding
/
src
/
components
/
Inputs
/
ButtonInput.tsx
ButtonInput.tsx in WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance 4.7.0, at vendor/team-updraft/lib-onboarding-wizard/Wizard/Onboarding/src/components/Inputs/ButtonInput.tsx
| 1 | import { clsx } from "clsx"; |
| 2 | import { type ButtonHTMLAttributes, type ReactNode, type MouseEventHandler } from "react"; |
| 3 | |
| 4 | interface ButtonInputProps extends ButtonHTMLAttributes<HTMLButtonElement> { |
| 5 | children: ReactNode; |
| 6 | onClick?: MouseEventHandler<HTMLButtonElement>; |
| 7 | link?: string; |
| 8 | btnVariant?: "primary" | "secondary" | "tertiary" | "danger" | "transparent" | "transparent-disabled"; |
| 9 | disabled?: boolean; |
| 10 | size?: "sm" | "md" | "lg"; |
| 11 | className?: string; |
| 12 | /** |
| 13 | * If provided, this will fully override all default button classes. |
| 14 | * This is useful when we want schema-driven buttons to control styling completely. |
| 15 | */ |
| 16 | rawClassName?: string; |
| 17 | } |
| 18 | |
| 19 | /** |
| 20 | * A versatile button component that can render as either a <button> or an <a> element. |
| 21 | * |
| 22 | * Use the `btnVariant` prop to adjust the visual style: |
| 23 | * - "primary" for a green-themed button. |
| 24 | * - "secondary" for a blue-themed button. |
| 25 | * - "tertiary" for a neutral, gray-themed button. |
| 26 | * - "danger" for a red-themed button. |
| 27 | * - "transparent" for a transparent-themed button. |
| 28 | * - "transparent-disabled" for a disabled-looking transparent button. |
| 29 | * |
| 30 | * The `size` prop controls button dimensions: |
| 31 | * - "sm" for smaller padding and text. |
| 32 | * - "md" for default spacing. |
| 33 | * - "lg" for increased padding and larger, bolder text. |
| 34 | * @param props - Props for configuring the button. |
| 35 | * @param props.children - The content to display inside the button. |
| 36 | * @param props.onClick - Click handler for the button. |
| 37 | * @param props.link - Optional URL to render the button as an anchor tag. |
| 38 | * @param props.btnVariant - Visual style variant of the button. |
| 39 | * @param props.disabled - Whether the button is disabled. |
| 40 | * @param props.size - Size variant of the button. |
| 41 | * @param props.className - Additional CSS classes to apply. |
| 42 | * @returns The rendered button or link component. |
| 43 | */ |
| 44 | const ButtonInput = ({ |
| 45 | children, |
| 46 | onClick, |
| 47 | link, |
| 48 | btnVariant = "secondary", |
| 49 | disabled = false, |
| 50 | size = "md", |
| 51 | className = "", |
| 52 | rawClassName, |
| 53 | ...props |
| 54 | }: ButtonInputProps) => { |
| 55 | // If rawClassName is provided, use it as-is and skip all default styling logic. |
| 56 | const classes = rawClassName |
| 57 | ? rawClassName |
| 58 | : clsx( |
| 59 | // Base styles for all button variants |
| 60 | "rounded-xl transition-all duration-200", |
| 61 | // Variant-specific styles |
| 62 | { |
| 63 | "bg-primary border border-primary text-white hover:bg-primary hover:[box-shadow:0_0_0_3px_rgba(43,129,51,0.5)] focus:[box-shadow:0_0_0_3px_rgba(43,129,51,0.5)]": |
| 64 | btnVariant === "primary", |
| 65 | "bg-[var(--teamupdraft-orange-dark)] border border-[var(--teamupdraft-orange-dark)] text-white hover:[box-shadow:0_0_0_3px_#C4511C99] focus:[box-shadow:0_0_0_3px_#C4511C99]": |
| 66 | btnVariant === "secondary", |
| 67 | "bg-gray-100 border border-gray-400 text-gray-600 hover:bg-gray-200 hover:text-gray hover:[box-shadow:0_0_0_3px_rgba(0,0,0,0.1)] focus:[box-shadow:0_0_0_3px_rgba(0,0,0,0.1)]": |
| 68 | btnVariant === "tertiary", |
| 69 | "bg-red border border-red text-white hover:bg-red hover:[box-shadow:0_0_0_3px_rgba(198,39,59,0.5)] focus:[box-shadow:0_0_0_3px_rgba(198,39,59,0.5)]": |
| 70 | btnVariant === "danger", |
| 71 | "bg-transparent text-[var(--teamupdraft-grey-600)] hover:text-[var(--teamupdraft-grey-900)]": |
| 72 | btnVariant === "transparent", |
| 73 | "bg-transparent border border-[var(--teamupdraft-grey-100)] text-[var(--teamupdraft-grey-200)]": |
| 74 | btnVariant === "transparent-disabled", |
| 75 | }, |
| 76 | // Size-specific styles |
| 77 | { |
| 78 | "py-0.5 text-sm font-normal": size === "sm", // Small: Reduced padding and smaller text |
| 79 | "py-1.5 text-base font-medium": size === "md", // Medium (default): Standard padding and text size |
| 80 | "py-2 text-lg font-semibold": size === "lg", // Large: Increased padding and larger, bolder text |
| 81 | }, |
| 82 | // Disabled styles |
| 83 | { |
| 84 | "opacity-50 cursor-not-allowed": disabled, |
| 85 | }, |
| 86 | className |
| 87 | ); |
| 88 | |
| 89 | if (link) { |
| 90 | return ( |
| 91 | <a href={link} target={"_blank"} className={classes}> |
| 92 | {children} |
| 93 | </a> |
| 94 | ); |
| 95 | } |
| 96 | |
| 97 | return ( |
| 98 | <button |
| 99 | type={props.type || "button"} |
| 100 | onClick={onClick} |
| 101 | className={classes} |
| 102 | disabled={disabled} |
| 103 | {...props} |
| 104 | > |
| 105 | {children} |
| 106 | </button> |
| 107 | ); |
| 108 | }; |
| 109 | |
| 110 | ButtonInput.displayName = "ButtonInput"; |
| 111 | |
| 112 | export default ButtonInput; |