S-button Component Missing Full-Width Support (Equivalent to Polaris React fullWidth Prop)

Polaris
1

Hi Shopify team,

While reviewing the s-button web component, I noticed there’s currently no way to make the button full width — similar to the fullWidth prop available in the Polaris React Button component.

Use case:

In many responsive layouts or form sections, especially on mobile devices, we often need buttons to span the full width of their parent container. This is easily achieved in Polaris React using the fullWidth prop like this:

<Button fullWidth>Submit</Button>

However, in the web component version (s-button), there doesn’t appear to be an equivalent. Here’s an example of what I tried:

<div style="width: 100%">
  <s-button>Submit</s-button>
</div>

Even when wrapping the s-button in a full-width container, the button itself doesn’t expand to fill it. I also tried applying styles directly:

<s-button style="width: 100%">Submit</s-button>

But this doesn’t behave consistently across different layouts and often gets overridden.

Is there a recommended way to achieve this in the current implementation? If not, could full-width support be added to maintain parity with Polaris React components?

Thanks in advance!

2

Currently full width buttons are only for Mobile in the Admin. Do you have an example of what you are trying to build that would benefit from full width buttons?

3

For example, in the pricing card screenshot attached below, I want the “Try for free” button to span the full width of the card.

image
image344×650 22.7 KB

1 Like
4

Thanks. The current button design is not built for this user experience and providing this functionality could create mis-use of the button. This is something we have to be very careful about adding as we do not want to remove features when we add them.

At this point in time you can do this with clickable. I will let our team know about your use case.

5

Thanks for the clarification. I completely understand the concerns around maintaining consistent user experience and preventing potential misuse. I appreciate you highlighting the reasoning behind the current implementation.

I’ll explore the clickable option in the meantime. Thanks for considering our use case—looking forward to any future updates from the shopify.