Cannot use custom component props with Button and typescript

Describe the issue. What is the expected and unexpected behavior? Button allows one to specify the component prop. The idea being that you can switch from rendering a button to something else such as an anchor tag. This works fine if the component is an html element, but not when it is a custom React component.

I want to create a button backed by a react-router Link however in doing so the Button component will not accept the to property.

Ideally I should be able to do parameterize the component such as:

<Button<React.ComponentProps<typeof Link>> component={Link} to="...">my link</Button>

Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.

The following results in a typescript error for attribute to:

<Button component={Link} to="...">my link</Button>

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around? bug

What is your product and what release version are you targeting? OpenShift 4.8

[tlabaj]

@mcarrano can we pull this into the next milestone.

[jonkoops]

Note that this same code works perfectly fine with the types from styled-components (see below), perhaps the types from there could be borrowed.

import React from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";

const Button = styled.button`
  background-color: hotpink;
`;

export const MyLinkButton = () => <Button as={Link} to="/some-path"></Button>;