Button component as={Link} triggers typecheck error

[shixiao]

• I have searched the Issues to see if this bug has already been reported
• I have tested the latest version

Steps to reproduce

1. Go to 'this sandbox'
2. Run task dev (which does yarn dev)

Current behavior

The second button (<Button as={Link} href="www.example.com">Toggle 2</Button>) triggers a typechecker error:

Type '{ children: string; as: ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof InternalLinkProps> & InternalLinkProps & { ...; } & RefAttributes<...>>; href: string; }' is not assignable to type 'Pick<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof InternalLinkProps> & InternalLinkProps & { ...; } & RefAttributes<...>, "slot" | ... 263 more ... | keyof InternalLinkProps>'.
  Types of property 'as' are incompatible.
    Type 'ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof InternalLinkProps> & InternalLinkProps & { ...; } & RefAttributes<...>>' is not assignable to type 'Url | undefined'.typescript(2322)

Expected behavior

No typechecker error.

Context

#885 made a series of Button and ButtonProps types / interfaces generic, attempting to allow as={...}. For some reason, this is not working for as={Link}.

[shixiao]

https://codesandbox.io/p/sandbox/dropdownas-f992mv?file=%2Fpages%2Findex.tsx%3A6%2C29

as={Link} and ref={ref} are also not working on Dropdown.Item. (forwardRef used to work on them)

cc: @nigellima @rluders

[rluders]

This impacts #1001

[mdtausifiqbal]

<Dropdown.Item as="a" href="https://flowbite.com/" target="_blank"> External link </Dropdown.Item>

This is not working for me and also as={Link} not working

[pangolingo]

I've avoided this in my codebase by creating a custom component that passes props to the button component:

import {
  Button as FlowbiteButton,
  ButtonProps as FlowbiteButtonProps,
} from "flowbite-react";
import Link from "next/link";

export default function Button(
  props: FlowbiteButtonProps<"a" | "button" | typeof Link>
) {
  return <FlowbiteButton theme={buttonTheme} {...props} />;
}

I can use the ButtonProps generic to tell Flowbite which types of "as" to expect.

[dima-kov]

any updates on this?