[Button] href does not exist when used as anchor

Describe the bug A clear and concise description of what the bug is.

I’m using typescript. When using the Button component with as="a" prop, it’s throwing type error. My usage looks like:

<Button as="a" href="http://localhost:4000/auth/github" leftIcon={FiGithub}>
  Login with GitHub
</Button>

The error being thrown is:

Type '{ children: string; as: "a"; href: string; leftIcon: IconType; }' is not assignable to type 'IntrinsicAttributes & IButton & Pick<PseudoBoxProps, "fontWeight" | "lineHeight" | "fontSize" | "letterSpacing" | "fontFamily" | ... 436 more ... | "_placeholder"> & { ...; }'.
 |   Property 'href' does not exist on type 'IntrinsicAttributes & IButton & Pick<PseudoBoxProps, "fontWeight" | "lineHeight" | "fontSize" | "letterSpacing" | "fontFamily" | ... 436 more ... | "_placeholder"> & { ...; }'.

I suspect this might be an issue with type definitions of Button where it would need to support props of a if the component is being rendered as an anchor tag.

Expected Behavior A clear and concise description of what you expected to happen.

The error should not happen when as="a" is passed but it is valid if the Button is being rendered as an actual button

To Reproduce

• Codesandbox link
• Steps:

1. Use a Button component in a TS file with the above usage (with as="a" and href prop)
2. Check TS errors

Suggested solution(s)

I think type definitions have to be updated for this. Not sure how they should be handled dynamically based on as prop at the moment.

Desktop (please complete the following information):

• OS: MacOS
• Browser Firefox 71.0
• Version 0.52.0

[corysimmons]

Posting this here because it’s the first result for linkbutton chakra.

For NextJS users, I use this and it seems to work as expected:

import Link, { LinkProps } from 'next/link'
import { Button, ButtonProps } from '@chakra-ui/react'

type Props = ButtonProps & LinkProps;

const LinkButton = ({ href, children, ...props }: Props) => (
	<Link href={href}>
		<Button as="a" cursor="pointer" {...props}>{children}</Button>
	</Link>
)

export default LinkButton

[segunadebayo]

HI @divyanshu013, this has been resolved in the current TypeScript version we’re working on. I’ll add this to #205 for safe-keeping and double-checking.