Choose a version:

Page

The page component is the outer wrapper of a full page, including the page heading, subheading, and page-level actions. It provides a familiar and consistent style that sets expectations about the purpose of the page.

Page supports primary actions, secondary actions, and breadcrumb navigation to help customers orient themselves and take action. For grouping content within a page, use section.

Page is a full-page wrapper for the top level of a customer-account.page.render extension target. Only buttons are supported in the action slots, with one primary action — additional actions go in secondary-actions.

Support

Targets (24)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the page component.

Anchor to heading heading string: The main heading displayed at the top of the page.
Anchor to id id string: A unique identifier for the element. Use this to target the element with CSS, JavaScript, or accessibility attributes. The id must be unique within the document.
Anchor to subheading subheading string: A secondary heading displayed below the main heading for additional context.

Anchor to SlotsSlots

The page component supports slots for additional content placement within the component. Learn more about using slots.

Anchor to breadcrumb-actions breadcrumb-actions HTMLElement: A navigation link that lets the customer return to the previous page. Accepts a single button component. Learn more about breadcrumb actions.
Anchor to primary-action primary-action HTMLElement: The main call-to-action for the page. Accepts a single button component. Learn more about primary actions.
Anchor to secondary-actions secondary-actions HTMLElement: Additional actions for the page. Accepts one or more button components. Learn more about secondary actions.

Anchor to Breadcrumb actionsBreadcrumb actions

Place a button in the breadcrumb-actions slot to provide backward navigation. The breadcrumb button appears above the page heading and lets customers return to a parent page, such as navigating from a subscription detail page back to the subscriptions list.

Anchor to accessibilityLabel accessibilityLabel string required: A label that describes the breadcrumb's destination to assistive technologies. Required because children passed to this button are discarded.
Anchor to click click (event: EventListener & ((event: <"s-button", Event>) => void)) => void: A callback that fires when the breadcrumb is activated.
Anchor to href href string: The URL to navigate to when the breadcrumb is activated.

CallbackEvent

An event type that narrows the `currentTarget` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners.

TEvent & {
  currentTarget: HTMLElementTagNameMap[TTagName];
}

Anchor to Primary actionsPrimary actions

Place a button in the primary-action slot to surface the most important action for the page. The primary action button appears prominently in the page header. Each page supports only one primary action, so choose the single most relevant action for the current context.

Anchor to accessibilityLabel accessibilityLabel string: A label that describes the button's purpose to assistive technologies. Use this when the button text alone doesn't provide enough context.
Anchor to click click (event: EventListener & ((event: <"s-button", Event>) => void)) => void: A callback that fires when the button is activated, before the action indicated by type.
Anchor to command command '--auto' | '--show' | '--hide' | '--toggle' | '--copy' Default: '--auto': The action the commandFor target should take when this button is activated.

--auto: A default action for the target component.

--show: Shows the target component.

--hide: Hides the target component.

--toggle: Toggles the target component.

--copy: Copies the target ClipboardItem.
Anchor to commandFor commandFor string: The ID of the component to control when this component is activated. Pair with the command property to specify what action to perform on the target component. Learn more about the commandFor attribute.
Anchor to disabled disabled boolean Default: false: Whether the button is disabled and non-interactive.
Anchor to href href string: The URL to navigate to when the button is activated. If a commandFor is set, the command is executed instead of the navigation.
Anchor to loading loading boolean Default: false: Whether to replace the button content with a loading indicator.

Anchor to Secondary actionsSecondary actions

Place one or more buttons in the secondary-actions slot to provide additional actions that support the page's purpose without competing with the primary action. Secondary actions appear alongside the primary action in the page header and are styled with less visual emphasis.

Anchor to accessibilityLabel accessibilityLabel string: A label that describes the button's purpose to assistive technologies. Use this when the button text alone doesn't provide enough context.
Anchor to click click (event: EventListener & ((event: <"s-button", Event>) => void)) => void: A callback that fires when the button is activated, before the action indicated by type.
Anchor to command command '--auto' | '--show' | '--hide' | '--toggle' | '--copy' Default: '--auto': The action the commandFor target should take when this button is activated.

--auto: A default action for the target component.

--show: Shows the target component.

--hide: Hides the target component.

--toggle: Toggles the target component.

--copy: Copies the target ClipboardItem.
Anchor to commandFor commandFor string: The ID of the component to control when this component is activated. Pair with the command property to specify what action to perform on the target component. Learn more about the commandFor attribute.
Anchor to disabled disabled boolean Default: false: Whether the button is disabled and non-interactive.
Anchor to href href string: The URL to navigate to when the button is activated. If a commandFor is set, the command is executed instead of the navigation.
Anchor to loading loading boolean Default: false: Whether to replace the button content with a loading indicator.

Anchor to ExamplesExamples

Anchor to Display an Order status pageDisplay an Order status page

Use page to structure an order detail view with a heading, subheading, and action buttons. This example shows an Order status page with "Buy again" and "Manage" secondary actions in the page header.

Display an Order status page

A full page layout with an Order heading, action buttons, delivery status, and body content.

html

<s-page heading="Order #1411" subheading="Confirmed Oct 5">

<s-button slot="secondary-actions">Buy again</s-button>

<s-button slot="secondary-actions" commandFor="manage-menu" command="--show">Manage</s-button>

<s-text>Delivered Oct 14</s-text>

<s-text>Haven't received your delivery? <s-link href="/contact">Let us know</s-link></s-text>

</s-page>

Anchor to Add a page-level actionAdd a page-level action

Place a button in the secondary-actions slot to add a contextual action to the page header. This example shows a subscription detail page with a "Manage" action.

html

<s-page heading="Subscription details" subheading="Mini garden seeds — Monthly">

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

<s-text>Next delivery: January 15, 2026</s-text>

</s-page>

Anchor to Add multiple actionsAdd multiple actions

Place multiple buttons in the secondary-actions slot to provide additional actions for the page. This example shows a return request page with "Submit return" and "Contact support" actions.

html

<s-page heading="Return request" subheading="Order #1042 — Mini garden seeds">

<s-button slot="secondary-actions">Submit return</s-button>

<s-button slot="secondary-actions">Contact support</s-button>

<s-text>Select the items you'd like to return and choose a reason for each item.</s-text>

</s-page>

Anchor to Best practicesBest practices

Write clear, focused headings: State the main purpose of the page in a few words and use sentence case for readability.
Use subheadings only when they add value: Add a subheading when it provides helpful context that's different from the heading. Keep it brief to avoid clutter.
Add page-level actions thoughtfully: Include buttons in the header only for actions that affect the entire page. Make the main action a primary button and keep lesser actions secondary.
Limit the number of actions: Too many actions in the page header can overwhelm customers. Focus on the most important one or two actions.

Was this page helpful?