---
title: Page
description: >-
The outer wrapper of the page—including the page title, subtitle, and
page-level actions—displayed in a familiar and consistent style that sets
expectations about the purpose of the page. Use Page to create a consistent
top-level structure that includes navigation context, action buttons, and a
content area.
api_version: 2026-04
api_name: customer-account-ui-extensions
source_url:
html: >-
https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/page
md: >-
https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/page.md
---
# 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](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/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
* [customer-account.footer.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/footer#footer-render-after-)
* [customer-account.order-index.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-announcement-)
* [customer-account.order-index.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-block-)
* [customer-account.order-status.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-announcement-)
* [customer-account.order-status.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-block-)
* [customer-account.order-status.cart-line-item.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-item-render-after-)
* [customer-account.order-status.cart-line-list.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-list-render-after-)
* [customer-account.order-status.customer-information.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#customer-information-render-after-)
* [customer-account.order-status.fulfillment-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.order-status.payment-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#payments-and-returns-targets)
* [customer-account.order-status.return-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#return-details-render-after-)
* [customer-account.order-status.unfulfilled-items.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.order.action.menu-item.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-menu-item-)
* [customer-account.order.action.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-)
* [customer-account.order.page.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#order-specific-full-page-)
* [customer-account.page.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#customer-account-full-page-)
* [customer-account.profile.addresses.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.profile.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-announcement-)
* [customer-account.profile.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-block-)
* [customer-account.profile.company-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#profile-page-b2b-targets-)
* [customer-account.profile.company-location-addresses.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-addresses-render-after-)
* [customer-account.profile.company-location-payment.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-payment-render-after-)
* [customer-account.profile.company-location-staff.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-staff-render-after-)
* customer-account.profile.payment.render-after
#### Use cases
* **Order status pages**: Display an order heading with confirmation details and actions like "Buy again" or "Cancel order".
* **Subscription management**: Show subscription details with a breadcrumb back to the subscriptions list and a primary "Manage" action.
* **Custom account pages**: Build branded full-page experiences with clear headings and contextual actions.
* **Return and exchange flows**: Structure multi-step processes with a descriptive heading and navigation back to the originating page.
***
## Properties
Configure the following properties on the page component.
* **heading**
**string**
The main heading displayed at the top of the page.
* **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.
* **subheading**
**string**
A secondary heading displayed below the main heading for additional context.
### Slots
The page component supports slots for additional content placement within the component. Learn more about [using slots](https://shopify.dev/docs/api/polaris/using-polaris-web-components#slots).
* **breadcrumb-actions**
**HTMLElement**
A navigation link that lets the customer return to the previous page. Accepts a single [button](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/button) component. Learn more about [breadcrumb actions](#breadcrumb-actions).
* **primary-action**
**HTMLElement**
The main call-to-action for the page. Accepts a single [button](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/button) component. Learn more about [primary actions](#primary-actions).
* **secondary-actions**
**HTMLElement**
Additional actions for the page. Accepts one or more [button](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/button) components. Learn more about [secondary actions](#secondary-actions).
### Breadcrumb actions
Place a [button](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/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.
* **accessibilityLabel**
**string**
**required**
A label that describes the breadcrumb's destination to assistive technologies. Required because `children` passed to this button are discarded.
* **click**
**(event: EventListener & ((event: CallbackEvent<"s-button", Event>) => void)) => void**
A callback that fires when the breadcrumb is activated.
* **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.
```ts
TEvent & {
currentTarget: HTMLElementTagNameMap[TTagName];
}
```
### Primary actions
Place a [button](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/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.
* **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.
* **click**
**(event: EventListener & ((event: CallbackEvent<"s-button", Event>) => void)) => void**
A callback that fires when the button is activated, before the action indicated by `type`.
* **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.
* **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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).
* **disabled**
**boolean**
**Default: false**
Whether the button is disabled and non-interactive.
* **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.
* **loading**
**boolean**
**Default: false**
Whether to replace the button content with a loading indicator.
### Secondary actions
Place one or more [buttons](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/button) 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.
* **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.
* **click**
**(event: EventListener & ((event: CallbackEvent<"s-button", Event>) => void)) => void**
A callback that fires when the button is activated, before the action indicated by `type`.
* **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.
* **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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).
* **disabled**
**boolean**
**Default: false**
Whether the button is disabled and non-interactive.
* **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.
* **loading**
**boolean**
**Default: false**
Whether to replace the button content with a loading indicator.
***
## Examples
### Display 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
## html
```html
Buy again
Manage
Delivered Oct 14
Haven't received your delivery? Let us know
```
### Add 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
```html
Manage
Next delivery: January 15, 2026
```
### Add 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
```html
Submit return
Contact support
Select the items you'd like to return and choose a reason for each item.
```
***
## Best 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.
***