Headless UI throws “Passing props on Fragment” when Catalyst Button is used (TouchTarget returns Fragment)

[gsw85]

What component (if applicable)

• URL for category: https://catalyst.tailwindui.com/docs/button
• Component name: Button (Catalyst)

---

Describe the bug

I am seeing an intermittent runtime error in the browser console related to the Catalyst <Button> component:

What component (if applicable)

• URL for category: https://catalyst.tailwindui.com/docs/button
• Component name: Button (Catalyst)

---

Describe the bug

I am seeing an intermittent console error related to the Catalyst Button component.
The error does not happen every time, but occasionally appears when the Button’s children include a Fragment.

Example of how I am using the Button:

<Button>
  <>
    <Icon />
    Edit
  </>
</Button>

Sometimes this produces the following error:

The current component <DataInteractive /> is rendering a "Fragment".
However we need to passthrough the following props:
  - ref
  - onFocus
  - onBlur
  - onPointerEnter
  - onPointerLeave
  - onPointerDown
  - onPointerUp
  - onClick
  - data-headlessui-state

It appears that props are occasionally being forwarded to the Fragment (<>...</>), which React does not allow.
Because the issue is intermittent, I cannot reliably reproduce it every time.

To Reproduce

The issue does not have a consistent or guaranteed reproduction path.
General conditions where it appears:

1. Use a Catalyst Button whose children are wrapped inside a Fragment (example above).
2. Render and interact with the Button normally in the application.
3. The error appears only sometimes, not always.

There is no fixed sequence of interactions that guarantees reproduction.

Expected behavior

Using a Fragment as children inside a Catalyst Button should not result in runtime errors.

Browser/Device

• OS: Windows 10
• Browser: Chrome (latest)
• Also seen intermittently in other browsers