How can I extend both types 'ButtonHTMLAttributes<HTMLButtonElement> and VariantProps ?

[fiqryq]

I want to create button components using React TypeScript, but I am unable to extend both React.ButtonHTMLAttributes<HTMLButtonElement> and the VariantProps without causing an error. Specifically, the error message reads: "Interface 'ButtonProps' cannot simultaneously extend types 'ButtonHTMLAttributes<HTMLButtonElement>'."

Here my code :

import { merge } from "@/lib"
import React from "react";
import { tv, type VariantProps } from "tailwind-variants"

const styles = tv({
    base: "text-mine-shaft-600 rounded-sm",
    variants: {
        color: {
            primary: "bg-blue-500 text-white",
            secondary: "bg-mine-shaft-500 text-white",
            warning: "bg-yellow-500 text-white",
            success: "bg-green-500 text-white",
        },
        size: {
            sm: "text-sm",
            md: "px-3 py-1 text-base",
            lg: "px-4 py-1 text-lg",
            xl: 'px-6 py-1 text-xl'
        },
        radius: {
            sm: "rounded-sm",
            md: "rounded-md",
            lg: "rounded-lg",
            xl: 'rounded-xl',
            full: 'rounded-full'
        },
        border: {
            true: "border border-mine-shaft-500",
        }
    },
    compoundVariants: [
        {
            size: ["sm", "md", 'lg', 'xl'],
            radius: ["sm", "md", 'lg', 'xl', 'full'],
            class: "px-3 py-1",
        },
    ],
    defaultVariants: {
        size: "md",
        radius: 'sm',
        border: false
    }
});

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof styles> {}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
    ({ size, color, radius, border, ...props }, ref) => {
        return (
            <button className={
                merge(styles({
                    color: color,
                    size: size,
                    radius: radius,
                    border: border
                }))}
                ref={ref}
                {...props}
            />
        )
    })

export { Button }

error message :

Interface 'ButtonProps' cannot simultaneously extend types 'ButtonHTMLAttributes<HTMLButtonElement>' and 'VariantProps<TVReturnType<{ color: { primary: string; secondary: string; warning: string; success: string; }; size: { sm: string; md: string; lg: string; xl: string; }; radius: { sm: string; md: string; lg: string; xl: string; full: string; }; border: { ...; }; }, unknown, undefined, undefined, "text-mine-shaft-600 ...'.
  Named property 'color' of types 'ButtonHTMLAttributes<HTMLButtonElement>' and 'VariantProps<TVReturnType<{ color: { primary: string; secondary: string; warning: string; success: string; }; size: { sm: string; md: string; lg: string; xl: string; }; radius: { sm: string; md: string; lg: string; xl: string; full: string; }; border: { ...; }; }, unknown, undefined, undefined, "text-mine-shaft-600 ...' are not identical.

[its-monotype]

Omit all keys that are conflicting or just keyof Variant Props from HTML button props before extending it with VariantProps or use type aliases with intersection

[jrgarciadev]

Hey @fiqryq you could try to do this:

type ButtonVariantProps = VariantProps<typeof styles>;
type NativeProps = React.ButtonHTMLAttributes<HTMLButtonElement>;

interface ButtonProps
  extends Omit<NativeProps, keyof ButtonVariantProps>,
    ButtonVariantProps {}

[fiqryq]

its work thankyou!!!

[indrazm]

I am trying to do this.
But i got error.

type InputVariants = VariantProps<typeof input>;
type NativeProps = React.InputHTMLAttributes<HTMLInputElement>;

interface InputProps extends Omit<NativeProps, keyof InputVariants>, InputVariants {}

export function Input(props: InputProps) {
  return <input className={input(props)} />;
}

export default Input;