It's also good to mention about extending the native html attributes types from the react library. This way, we can pass the specific all the props of the component to the returned element:

import React, { ButtonHTMLAttributes } from 'react';

export type ButtonProps = {

variant?: 'primary' | 'secondary';

} & ButtonHTMLAttributes<HTMLButtonElement>;

export const Button = ({ children, variant = 'primary', ...rest }: ButtonProps) => {

return (

<button className={cs(styles.base, styles[variant])} {...rest}>

{children}

</button>

);

};

This way we are passing all the attributes of the button (like the 'disabled' attribute) using the rest parameter (...) and we are basically turning our custom button to a native button