Customer account ui - profile style buttons

Extensions
,
1

I am trying to build a customer account ui extension for the profile page.

I notice that for the name/email section and the addresses section there is a heading with the button on the right…

profile
profile1334×504 36.8 KB

Unless I’m missing something, I can’t see how to replicate this heading → button pattern with the availble components?

Secondly, when choosing to edit the modal has a save button, but with a text cancel to the left, again I can’t see how to replicate this pattern?

edit
edit1416×622 47.4 KB

I’m keen to make my extension look as native as possible, so hopefully someone can advise how I replicate these patterns, please?

Thanks.

2

Hey @Alex_Dover - thanks for reaching out.

I did some testing here, and it looks like the heading with a button on the right is doable. In a profile block, a two-column s-grid works:

function ProfileSection() {
  return (
    <s-section>
      <s-stack direction="block" gap="base">
        <s-grid
          gridTemplateColumns="1fr auto"
          gap="base"
          alignItems="center"
        >
          <s-heading>Profile</s-heading>
          <s-button
            command="--show"
            commandFor="my-app-profile-modal"
          >
            Edit
          </s-button>
        </s-grid>
        <s-text>Profile content</s-text>
      </s-stack>
    </s-section>
  );
}

For the modal footer, s-modal has primary-action and secondary-actions slots, but both are for button actions. s-button only supports auto, primary, and secondary, so there isn’t a plain or text-style button. s-link replaces the old plain button, but it can’t be used in the modal action slots.

So you can build Save and Cancel buttons, but you can’t match the built-in text Cancel right now. I’ll submit this as a feature request for a text-style s-button variant, so actions like Cancel can match Shopify’s built-in UI.

References:

Hope this helps!

4

Thank you for your help and suggestions - unless I’m missing something, that doesn’t seem to quite match the layout of the other sections

profile
profile1356×826 56.4 KB

I’ve tried 2026-04 and 2026-07 versions of the extensions.

6

Hey @Alex_Dover - your understanding is correct. Extension secondary buttons without a custom secondary background currently use the brand colour, while Shopify’s native actions use a monochrome style. We’re aware of this gap.

It may be possible to approximate the native appearance by changing the broader secondary-button colours through the Checkout Branding API, but that can affect other secondary buttons and may not suit the merchant’s intended branding. There isn’t currently a component-level setting to make only this button monochrome to match Shopify’s native look.

We’re exploring changes in this area, and I’ll follow up in this thread when I have more information. Thanks for sharing this feedback, and I hope this helps!

7

Ok, thanks for letting me know. Shame you couldn’t have made me aware of the gap first.

Hopefully the extensions can be updated soon to match the styles available to the native actions. Sadly, these sorts of inconstancies make us look bad and cause awkward conversations with merchants, they are not aware of the tooling we are forced to use behind the scenes.

8

Thanks for the response @Alex_Dover and it’s easy to see where you’re coming from here. Thanks for sharing this feedback as well. I’m digging into this further and I’ll follow up with you in this thread as soon as I have more information to share.