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.6.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 | |
| 14 | /** |
| 15 | * A versatile button component that can render as either a <button> or a <Link> element. |
| 16 | * |
| 17 | * Use the `btnVariant` prop to adjust the visual style: |
| 18 | * - "primary" for a green-themed button. |
| 19 | * - "secondary" for a blue-themed button. |
| 20 | * - "tertiary" for a neutral, gray-themed button. |
| 21 | * - "danger" for a red-themed button. |
| 22 | * - "transparent" for a transparent-themed button. |
| 23 | * |
| 24 | * The `size` prop controls button dimensions: |
| 25 | * - "sm" for smaller padding and text. |
| 26 | * - "md" for default spacing. |
| 27 | * - "lg" for increased padding and larger, bolder text. |
| 28 | * @param props - Props for configuring the button. |
| 29 | * @param props.children - The content to display inside the button. |
| 30 | * @param props.onClick - Click handler for the button. |
| 31 | * @param props.link - Optional URL to render the button as an anchor tag. |
| 32 | * @param props.btnVariant - Visual style variant of the button. |
| 33 | * @param props.disabled - Whether the button is disabled. |
| 34 | * @param props.size - Size variant of the button. |
| 35 | * @param props.className - Additional CSS classes to apply. |
| 36 | * @returns The rendered button or link component. |
| 37 | */ |
| 38 | const ButtonInput = ({ |
| 39 | children, |
| 40 | onClick, |
| 41 | link, |
| 42 | btnVariant = "secondary", |
| 43 | disabled = false, |
| 44 | size = "md", |
| 45 | className = "", |
| 46 | ...props |
| 47 | } :ButtonInputProps) => { |
| 48 | const classes = clsx( |
| 49 | // Base styles for all button variants |
| 50 | "rounded-xl transition-all duration-200", |
| 51 | // Variant-specific styles |
| 52 | { |
| 53 | "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)]": btnVariant === "primary", |
| 54 | "bg-[var(--teamupdraft-orange-dark)] border border-[var(--teamupdraft-orange-dark)] text-white hover:bg-[#C4511C] focus:bg-[#C4511C]": btnVariant === "secondary", |
| 55 | "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)]": btnVariant === "tertiary", |
| 56 | "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)]": btnVariant === "danger", |
| 57 | "bg-transparent text-[var(--teamupdraft-grey-600)] hover:text-[var(--teamupdraft-grey-900)]": btnVariant === "transparent", |
| 58 | "bg-transparent border border-[var(--teamupdraft-grey-100)] text-[var(--teamupdraft-grey-200)]": btnVariant === "transparent-disabled" |
| 59 | }, |
| 60 | // Size-specific styles |
| 61 | { |
| 62 | "py-0.5 text-sm font-normal": size === "sm", // Small: Reduced padding and smaller text |
| 63 | "py-1.5 text-base font-medium": size === "md", // Medium (default): Standard padding and text size |
| 64 | "py-2 text-lg font-semibold": size === "lg", // Large: Increased padding and larger, bolder text |
| 65 | }, |
| 66 | // Disabled styles |
| 67 | { |
| 68 | "opacity-50 cursor-not-allowed": disabled, |
| 69 | }, |
| 70 | className |
| 71 | ); |
| 72 | |
| 73 | if (link) { |
| 74 | return ( |
| 75 | <a href={link} target={"_blank"} className={classes}> |
| 76 | {children} |
| 77 | </a> |
| 78 | ); |
| 79 | } |
| 80 | |
| 81 | return ( |
| 82 | <button |
| 83 | type={props.type || "button"} |
| 84 | onClick={onClick} |
| 85 | className={classes} |
| 86 | disabled={disabled} |
| 87 | {...props} |
| 88 | > |
| 89 | {children} |
| 90 | </button> |
| 91 | ); |
| 92 | }; |
| 93 | |
| 94 | ButtonInput.displayName = "ButtonInput"; |
| 95 | |
| 96 | export default ButtonInput; |
| 97 |