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!