@PhillipWinder you are correct, And one more thing I observed -> if <ButtonGroup> has only one child then the style is correct.

if this issue is ready to take, can I work on this?

@vineetjk go for it! 🙌

sure @danilo-leal, I will work on this

I have found the cause for this bug.. 'data-first-child' and 'data-last-child' props are not applied to the buttons which are returned by function or wrapped in <> ...</>

Indeed, it should function with custom buttons. You can make it work by spreading the props to the Button element using this code:

const A = (props) => {
  return <Button {...props}>hi</Button>;
};

You can see an example here: CodeSandbox Link.

I believe the solution is to utilize the React Context API instead of cloneElements for ButtonGroup. This way, the Joy UI Button component can apply the data-* attributes to the DOM even when wrapped with a custom element.

Hi @ZeeshanTamboli,
You are correct! it works if we spread props to the Button element. But the same issue is not observed in material library
example : https://codesandbox.io/s/stupefied-montalcini-h8t9tc

But the same issue is not observed in material library
example : https://codesandbox.io/s/stupefied-montalcini-h8t9tc

Indeed, that's why I suggested using the Context API; it's what Material UI relies on internally.

Yeah I got it, sure I will do the changes..
thanks :)

I wrote on the newer issue but just to make sure but I'll write here just in case, I have opened a PR proposal, I managed to fix it by just using CSS.

#41456