Buttons in ButtonGroup don't change variants

I’m trying to use a button group (with no gaps) to display bunch of buttons when only one is selected (like is radio buttons, but looking like regular buttons. My usecase is display a switcher for Month/Week/Day/Agenda view in a calendar. I think joined buttons is the best UI for this and I was using the old react-based Polaris in similar scenarios.

image

It currently doesn’t display the button as primary even though the variant prop is set to primary. If button group cannot be used in this scenario, I think the documentation should clearly state so.

It can be reproduced here: https://codesandbox.io/p/sandbox/44l4pd

In the real Shopify App, it sometimes works but not reliably.

Buttons currently missed a “pressed” prop to outline the selected buttons. This is a big missing point for now, but I think the team is aware of this and this is planned.

1 Like