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! 