Typescript: button element type attribute

user_9856049 0
Viewed 99

I would like a custom button to optionally receive type attribute:

export interface ButtonProps {
  children: React.ReactNode;
  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
  type: ??
}


export const Button: React.FunctionComponent<ButtonProps> = ({ children, ...buttonProps }) => {
  return <StyledButton {...buttonProps}>{children}</StyledButton>;
};

export default Button;

Same as with 'onClick' which is working. Any type I'm trying to fill in, it still throws an error. What is the correct type for the type attribute?

typescript reactjs
1 Answers

You can write a button in your editor:

<button type='' />

and probably ctrl/command + click on the type, or hover on the type attribute see its type.

    interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
        autoFocus?: boolean | undefined;
        disabled?: boolean | undefined;
        form?: string | undefined;
        formAction?: string | undefined;
        formEncType?: string | undefined;
        formMethod?: string | undefined;
        formNoValidate?: boolean | undefined;
        formTarget?: string | undefined;
        name?: string | undefined;
        type?: 'submit' | 'reset' | 'button' | undefined;
        value?: string | ReadonlyArray<string> | number | undefined;
    }

Also you can extend the props of your component:

export interface ButtonProps extends React.HTMLProps<HTMLButtonElement> {}

You may want to overwrite or omit the types you want.

user_52893340
Related