DialogTrigger: usage with functional component

[AdisonCavani]

I'd like to separate my DialogTrigger (child) to a separate component (to separate large business logic).

import { Dialog, DialogContent, DialogTrigger } from "@radix-ui/react-dialog";
import { forwardRef } from "react"

function Test() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button/>
      </DialogTrigger>
      <DialogContent>
        Witam graczy!
      </DialogContent>
    </Dialog>
  )
}

export default Test

// This would be in a separate file
const Button = forwardRef<HTMLButtonElement>((_, ref) => {
  return <button ref={ref}>Click me</button>
});

Button.displayName = "Button"

When I click on the Button component, the dialog is not opened.
The dev console is clear - no errors reported.

[joaom00]

You should forward all props too https://www.radix-ui.com/docs/primitives/guides/composition#composing-with-your-own-react-components

[AdisonCavani]

How to compose component in Typescript?
The docs are missing which types to use. It cannot be any

[joaom00]

I think this section should be on the composition page 🤔

https://www.radix-ui.com/docs/primitives/guides/styling#extending-a-primitive