---
title: Page
description: >-
The Page component is the outer wrapper of a full page, including the page
heading, subtitle, and page-level actions. It provides a familiar and
consistent style that sets expectations about the purpose of the page.
api_version: 2025-07
api_name: customer-account-ui-extensions
source_url:
html: >-
https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/page
md: >-
https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/page.md
---
Migrate to Polaris
Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension.
# Page
The Page component is the outer wrapper of a full page, including the page heading, subtitle, 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 a [Card](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/card) or [BlockStack](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/blockstack).
### Support Targets (25)
### Supported targets
* CustomerAccount::KitchenSink
* [customer-account.footer.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/footer#footer-render-after-)
* [customer-account.order-index.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-targets)
* [customer-account.order-index.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-block-)
* [customer-account.order-status.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-announcement-)
* [customer-account.order-status.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-block-)
* [customer-account.order-status.cart-line-item.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/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/2025-07/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/2025-07/targets/order-status#customer-information-render-after-)
* [customer-account.order-status.fulfillment-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.order-status.payment-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/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/2025-07/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/2025-07/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.order.action.menu-item.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-menu-item-)
* [customer-account.order.action.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-)
* [customer-account.order.page.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#order-specific-full-page-)
* [customer-account.page.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#customer-account-full-page-)
* [customer-account.profile.addresses.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.profile.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#announcement-)
* [customer-account.profile.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-block-)
* [customer-account.profile.company-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/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/2025-07/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/2025-07/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/2025-07/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 primary "Manage subscription" 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 relevant actions.
***
## Properties
Configure the following properties on the Page component.
* **title**
**string**
**required**
The title displayed at the top of the page.
* **loading**
**boolean**
**Default: false**
Whether the page is in a loading state. When `true`, the page shows loading indicators for its own UI elements. The page is not responsible for loading indicators on content passed as `children`.
* **primaryAction**
**RemoteFragment**
The primary action slot, rendered as one or more buttons in the primary position of the page. Accepts a `RemoteFragment` containing `Button` components.
* **primaryActionAccessibilityLabel**
**string**
**Default: "More actions"**
A label announced by assistive technologies for the primary action grouping.
* **primaryActionLabel**
**string**
**Default: "More actions"**
A visible label for the primary action grouping. Displayed as the text trigger when actions overflow into a menu.
* **secondaryAction**
**RemoteFragment**
The secondary action slot, rendered as one or more buttons in the secondary position of the page. Accepts a `RemoteFragment` containing `Button` components.
* **subtitle**
**string**
An optional subtitle displayed below the title.
### Primary actions
Use the `primaryAction` prop to surface the most important actions for the page. Primary action buttons appear prominently in the page header.
* **accessibilityLabel**
**string**
A label announced by assistive technologies that describes the button's purpose. When set, the button's visible `children` are not announced to screen readers.
* **disabled**
**boolean**
**Default: false**
Whether the button is disabled. A disabled button is non-interactive and visually de-emphasized.
* **loading**
**boolean**
**Default: false**
Whether to replace the button content with a loading indicator.
* **loadingLabel**
**string**
An accessible label for the loading indicator, announced when the user prefers reduced motion. Only used when `loading` is `true`.
* **onPress**
**() => void**
A callback fired when the button is pressed.
* **overlay**
**RemoteFragment**
An overlay component rendered when the user interacts with the button, such as a modal or popover.
* **to**
**string**
A destination URL that the button navigates to. When set, the button behaves as a link.
### Secondary actions
Use the `secondaryAction` prop 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**
**required**
A label announced by assistive technologies that describes the button's purpose. Required because `children` passed to this component are discarded.
* **onPress**
**() => void**
A callback fired when the button is pressed.
* **to**
**string**
A destination URL that the button navigates to. When set, the button behaves as a link.
***
## Examples
### Display an order status page
Use Page to structure an order detail view with a heading, subtitle, and action buttons. The primary action appears prominently, while secondary actions are grouped separately.
## Display an order status page
## Display an order status page
##### React
```tsx
import {
Page,
Button,
reactExtension,
} from '@shopify/ui-extensions-react/customer-account';
import React from 'react';
export default reactExtension('customer-account.page.render', () => );
function App() {
return (
{}}/>}
primaryActionLabel="Manage"
primaryAction={
<>
}
>
Content
);
}
```
##### JS
```js
import {
Page,
Button,
extension
} from '@shopify/ui-extensions/customer-account';
export default extension(
'customer-account.page.render',
(root, api) => {
renderApp(root, api);
},
)
async function renderApp(root, api) {
const primaryAction = root.createFragment();
await primaryAction.append(root.createComponent(Button, {onPress: () => {console.log("primary action 1")}}, 'Buy again primary 1'));
await primaryAction.append(root.createComponent(Button, {onPress: () => {console.log("primary action 2")}}, 'Buy again primary 2'));
await primaryAction.append(root.createComponent(Button, {onPress: () => {console.log("primary action 3")}}, 'Buy again primary 3'));
const secondaryAction = root.createFragment();
await secondaryAction.append(root.createComponent(Button, {accessibilityLabel: 'Button', onPress: () => {}}))
const page = root.createComponent(
Page,
{
title: "Order #1411",
subtitle: "Confirmed Oct 5",
primaryAction,
primaryActionLabel: "Manage",
secondaryAction,
},
root.createComponent('View', {}, "Content")
)
root.append(page);
}
```
***
## Best practices
* **Write clear, focused titles**: State the main purpose of the page in 1-3 words and use sentence case.
* **Use subtitles sparingly**: Add a subtitle only when it provides context that's different from the title. Keep it brief.
* **Reserve actions for page-level operations**: Include buttons only for actions that affect the entire page or flow. Make the main action primary and keep lesser actions secondary.
* **Follow UX guidelines for order actions**: See [UX guidelines](https://shopify.dev/docs/apps/customer-accounts/order-action-menu-extensions/ux-guidelines) for button logic on order pages.
***
## Limitations
* Page is a full-page wrapper and can only be used at the top level of a page render extension target.
* When multiple primary action buttons are provided, overflow behavior is controlled by `primaryActionLabel` and `primaryActionAccessibilityLabel`.
* Page actions are restricted to button components with specific allowed properties. Other interactive elements aren't supported in action positions.
***