Polaris s-button: Pass "name" and "value" properties to the button

Hey Shopify team!

I have a request for an update to the s-button component. Currently, s-button doesn’t accept a name parameter and doesn’t pass the value parameter to the button.

These are native button properties. In its application, it allows us to use multiple actions within the same form, following React Router (formally Remix) best practices.

Ideally, I could use it like this:

<s-button
  name="intent"
  value="secondary_action"
  type="submit"
>
  My secondary action button
</s-button>

Currently, the above flags name with Property 'name' does not exist on type 'ReactProps$Q & ReactBaseElementPropsWithChildren<Button>'.

The rendered HTML doesn’t pass these properties to the actual button:

Currently I get around it by styling a regular button to look like a Polaris button, which doesn’t feel great.

Thank you for the consideration!

Due to how the shadow dom hides inputs inside of it from the form, and it takes additional work for custom elements to participate in forms, passing it directly to the button likely wouldn’t be a good enough solution for this.

To be clear, I think it could potentially be solved, but it would take additional work and testing. And for transparency, I don’t think this will be prioritized.

@Anthony_Frehner thank you for the transparency and the quick answer.

Due to how the shadow dom hides inputs inside of it from the form, and it takes additional work for custom elements to participate in forms

Does this mean that other web component inputs (s-text, s-choice-list, s-select, etc…) do the additional work to participate in forms? My form already recognizes those inputs with their values and names.

Yup! We’ve put in the work and tests to ensure they participate in forms automatically.

1 Like