Primary Action slot not visible in s-button-group when using Admin Polaris Web Components

Polaris
1

When using gap=”none” the primary-action is not visible in s-button-group

<s-button-group gap="none">

  <s-button slot="primary-action">Save</s-button>

  <s-button slot="secondary-actions">Cancel</s-button>

</s-button-group>

It looks like this →

image

When removing gap=”none” or making gap=”base” the same thing looks like this

image
image370×170 10.2 KB

Is this intentional?

3

Yes this is intentional: when buttons are grouped with no gap, then our current design system says that they should all be secondary buttons.

If you open your browser console, you’ll see warnings in the from the component telling you this.

polaris: <s-button-group gap=​"none">​…​​ - primary-action slot is not supported when gap=“none”. Only use the secondary-actions slot for segmented buttons.

1 Like