S-button-group not showing buttons

Hello, I am trying to use the new Polaris Web Component with in my app, but the buttons are no longer displayed.

Here is my code (which worked 2-3 days ago):

<s-table-cell>
   <s-button-group>
      <s-button icon="search" href="#" />
      <s-button icon="edit" href={`/webseiten/${edge.node.id.split("/").pop()}/edit`} />
   </s-button-group>
</s-table-cell>

When I remove this, the buttons are displayed successfully. What is interesting is that the buttons are still present in the source code:

I am using the following versions in package.json:

"@shopify/app-bridge-react": "^4.2.2",
"@shopify/shopify-app-react-router": "^0.2.0",
"@shopify/api-codegen-preset": "^1.2.0",
"@shopify/app-bridge-ui-types": "^0.3.2",

and is used.

I am also using the following version: GitHub - Shopify/shopify-app-template-react-router: An template for building Shopify Apps using React Router v7 and above (downloaded today)

1 Like

Have you made sure you are loading the correct script:

<script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>

Yes, this script is loaded and is also displayed in the iframe (the new version, no longer the “beta” version). However, when I insert the s-button-group, the buttons disappear immediately.

Hi Felix,

Great to see you’re exploring the new unified components!

I tested your code in my app, and I wasn’t able to get it working until I added the slot attribute into the buttons.
Essentially I copied the example in the docs for the ButtonGroup component.

Can you give the following a try and let me know how it goes?

<s-table-cell>
   <s-button-group>
      <s-button slot="primary-action" icon="search" href="#" />
      <s-button slot="secondary-actions" icon="edit" href={`/webseiten/${edge.node.id.split("/").pop()}/edit`} />
   </s-button-group>
</s-table-cell>

Hi Paige,

It worked with the slot attribute, but I’m no longer sure if that was already available on the page at the time.

Now it works with button-group and gap none as well as secondary-actions as a slot.

Hi Felix,

Looked into it, and it looks like we had updated the documentation not long after you reported the issue to us.

Thanks for confirming it works! :slight_smile: