How do I use Chip as a menu button in Joy UI?

Question

I'm rewriting a Next.js application to use Joy UI.

Joy UI offers a MenuButton component to open a menu. It behaves identically like a Button in terms of style. I would like to use a different component by Joy UI, but keep the same behavior.

In my case, I need one menu button to be an IconButton and another menu button to be a Chip.

I believe I did find a way to do this in an elegant way a while ago, but I can't remember it anymore. I was unable to find anything about it in the docs. I tried changing the component by using the component prop, but it didn't achieve anything. Is there a way to do this?

Answer 1

I figured it out.

component is the correct prop to use, but it's the other way around.

Instead of creating a MenuButton and passing Chip to it, create a Chip and pass MenuButton to it as component. Example:

<Chip
  component={MenuButton}>
  ...
</Chip>