Add action Prop to <s-section> for Flexible Layouts

Polaris
1

The <s-section> component is great for grouping related content with a heading, but it currently lacks an action prop (or slot) to place an action (such as a button, icon, or link) aligned to the right of the heading. This is a common pattern in Shopify admin, for example in customer or order cards, where you often see a heading on the left and an action (like a menu, button, or icon with tooltip) on the right.

Why This Matters

  • Many admin card layouts require a heading with an action (e.g., “Edit”, “More”, or a custom icon) on the same row.
  • The current <s-section> only supports a heading and content
  • Since the new <s-text> component does not allow custom sizing, it is even harder to create flexible, accessible, and visually consistent layouts without a built-in solution.
  • Sometimes the action is just text, sometimes it’s an icon with a tooltip, or a button—so flexibility is important.

Example Use Case

What we want to achieve:

Customer … (action menu)
Contact information …

Current workaround:
Developers have to create custom grid or flex layouts, which leads to inconsistent UI and more code to maintain.

Proposed Solution

  • Add an action prop (or named slot) to <s-section> that allows placing a React node or web component (button, icon, menu, etc.) aligned to the right of the heading.
  • Allow the action to be any valid node: text, icon, button, or a combination (e.g., icon with tooltip).

Additional Notes

  • This is a very common pattern in Shopify admin (see attached screenshot for reference).

Admin example
Admin example898×558 33.7 KB

1 Like
2

Thanks for the feedback! We’ll take this into consideration.

Also note that we need to roll out some foundational components for this first, such as a popover or menu component.

4

Hey thanks!

Im aware of rolling out other foundational components but we currently use this for a link component which is already part of the current rc, so ideally this deosnt get blocked.