Pattern for Reusable Button Wrapper

[stevegreco]

I am attempting to create a Reusable Button component for our Design System, and I am running into an issue, I have seen this with some other components as well, but basically, I want to be able to to do this.

import { Button, ButtonProps } from 'react-aria-components'

const ReusableButton = ({ children, ...props }: ButtonProps) => {
  return (
    <Button {...props}>
      {children}
      <Icon />
    </Button>
  );
};

This results in Typescript errors for {children}, which states that

Type 'ReactNode | ((values: ButtonRenderProps & { defaultChildren: ReactNode; }) => ReactNode)' is not assignable to type 'ReactNode'.
  Type '(values: ButtonRenderProps & { defaultChildren: ReactNode; }) => ReactNode' is not assignable to type 'ReactNode'.

Both Button and ButtonProps are coming from react-aria-components.

The only way to get around this is to extend ButtonProps and override children as ReactNode. I am wondering if anyone has any insight into this and how to accomplish something like this. Overriding the children might be the solution, because in this scenario, a user would not be able to pass in ((values: ButtonRenderProps & { defaultChildren: ReactNode; }) => ReactNode as a child.

[snowystinger]

We extend ButtonProps from RAC, but we omit children from it and change it to what we actually expose
https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/s2/src/Button.tsx#L54

[stevegreco]

Awesome, this is basically what I am doing now. Wasn't sure if I was missing something. Seemed off that Button was one of the components without any docs in regards to "Reusable Wrappers".