Text in Button not visible when using icon and commandFor props

Polaris
1

When I’m using both icon and commandFor props in s-button, I’m not able to see the text inside the button.

The code below

<s-button icon="chevron-down" commandFor="mymodal" command="--show">
  Button text
</s-button>

Looks like this. No “Button text“

image

____________________

This code. Where I removed commandFor

<s-button icon="chevron-down" command="--show">
  Button Text
</s-button>

Looks great but doesnt work.

image

________________

And when I removed icon, and kept commandFor & command

<s-button commandFor="mymodal" command="--show">

  Button Text

</s-button>

It looks like this and works well but icon is not there.

image

__________________

But I want both functionality and icon.

1 Like
2

We’re getting the same issue, only in Chrome. Button with text and icon works fine in Firefox.

We first noticed the issue today.

1 Like
3

Using this as of now. →

<s-button commandFor="mymodal" command="--show">

 <s-stack direction="inline" gap="none">

  <s-icon type="chevron-down" />

  Button Text

 </s-stack>

</s-button>
1 Like
4

Yea, noticed this change over night as well. For some extra context, if the button is a ‘commandFor’ for an <s-menu>, the chevron-down icon is shown as a suffix on the button. If you then add an icon, it becomes an ‘icon’ only menu.

5

I have the same problem.

Example code

<s-button
    variant="secondary"
    commandFor="preset-modal-product_page"
    command="--show"
    icon="edit"
>
    Change style
</s-button>

And this is how button appears

image
image446×402 9.32 KB

6

Hey folks - thanks for flagging this, we’re investigating this now and I’ll update here asap.

In the meantime the best workaround for now would be to manually insert custom content into the button’s children slot as @pizza described here:

2 Likes
7

Update: we shipped an update to resolve this bug. If you’re still seeing this behaviour please let us know here.

2 Likes