customer account ui extensions: Icons inside buttons

[mateusvahl]

Please list the package(s) involved in the issue, and include the version you are using

"@shopify/ui-extensions": "2024.10.x",
"@shopify/ui-extensions-react": "2024.10.x",

Describe the bug

When placing an <Icon /> inside the <Button>, the icon is not properly aligned vertically. We do have <Button inlineAlignment />, but not not a blockAlignment property.

Note: Shopify may not want to support this and consider an "anti-pattern" to place icons inside buttons, which in this case its OK and we can close this issue.

Steps to reproduce the behavior:

import { Button, Icon, InlineSpacer } from "@shopify/ui-extensions-react/customer-account";

<Button>
  <Icon source="orderBox" appearance="monochrome" />
  <InlineSpacer spacing="extraTight" />
  Action
</Button>

Screenshots

[brianshen1990]

Hey @mateusvahl , we do not have the blockAlignment for now. But what you can try to do is to put the icon and the text into a InlineStack so that it can be aligned perfectly.

<Button to={'extension:fullpage-extension/'}>
  <InlineStack blockAlignment="center" inlineAlignment="center" spacing='extraTight'>
    <Icon source="orderBox" appearance="monochrome" />
    <Text>Action</Text>
  </InlineStack>
</Button>

[mateusvahl]

Got it, just wanted to confirm that this is not an anti-pattern/not-recommended as well.

Thanks!