S-button with incorrect size

Polaris
1

We have been playing around with the new Polaris web components and first of all, a big thanks for all the effort put into it.

I found an issue where I believe the s-button incorrectly displays full width.

Code to reproduce:

<s-page>
    <s-section>
        <s-stack gap="base">
            <div>Some content</div>
            <s-button variant="primary">Action button</s-button>
        </s-stack>
    </s-section>
</s-page>

Directly applying a width:fit-content; to the button fixes the issue. Not sure if I’m missing something but I don’t believe this is the expected behaviour.

Thank you!

2

This is expected. s-stack uses flex and, by default, elements will stretch. You must use alignItems=“start” in the s-stack if you want to not make things stretch.

1 Like
3

Thank you very much @bakura10, I can confirm everything is ok.