---
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.
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/api/customer-account-ui-extensions/2025-10/upgrading-to-2025-10) to upgrade your extension.
# Page
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.
### Support Targets (25)
### Supported targets
* CustomerAccount::KitchenSink
* customer-account.footer.render-after
* customer-account.order-index.announcement.render
* customer-account.order-index.block.render
* customer-account.order-status.announcement.render
* customer-account.order-status.block.render
* customer-account.order-status.cart-line-item.render-after
* customer-account.order-status.cart-line-list.render-after
* customer-account.order-status.customer-information.render-after
* customer-account.order-status.fulfillment-details.render-after
* customer-account.order-status.payment-details.render-after
* customer-account.order-status.return-details.render-after
* customer-account.order-status.unfulfilled-items.render-after
* customer-account.order.action.menu-item.render
* customer-account.order.action.render
* customer-account.order.page.render
* customer-account.page.render
* customer-account.profile.addresses.render-after
* customer-account.profile.announcement.render
* customer-account.profile.block.render
* customer-account.profile.company-details.render-after
* customer-account.profile.company-location-addresses.render-after
* customer-account.profile.company-location-payment.render-after
* customer-account.profile.company-location-staff.render-after
* customer-account.profile.payment.render-after
## PageProps
* **title**
**string**
**required**
The text to be used as title.
* **loading**
**boolean**
**Default: false**
Indicates that the page is in a loading state.
When `true`, the page shows loading indicators for the UI elements that it is owns. The page is not responsible for the loading indicators of any content that is passed as `children`.
* **primaryAction**
**RemoteFragment**
The action grouping, provided as button(s), that is placed in the primary position of the page.
* **primaryActionAccessibilityLabel**
**string**
**Default: "More actions"**
Accessibility label for the primary action grouping. If an accessibility label is not provided, default text is used.
* **primaryActionLabel**
**string**
**Default: "More actions"**
Label for the primary action grouping. If a label is not provided, default text is used.
* **secondaryAction**
**RemoteFragment**
The action grouping, provided as button(s), that is placed in the secondary position of the page.
* **subtitle**
**string**
The text to be used as subtitle.
## ButtonProps primaryAction
Supported props for Buttons used inside Page `primaryAction` prop.\
\
`children` only support text.
* **accessibilityLabel**
**string**
A label used for buyers using assistive technologies. When set, any `children` supplied to this component will not be announced to screen reader users.
* **disabled**
**boolean**
**Default: false**
Disables the button, disallowing any interaction.
* **loading**
**boolean**
**Default: false**
Replaces content with a loading indicator.
* **loadingLabel**
**string**
Accessible label for the loading indicator when user prefers reduced motion. This value is only used if `loading` is true.
* **onPress**
**() => void**
Callback that is run when the button is pressed.
* **overlay**
**RemoteFragment**
An overlay component to render when the user interacts with the component.
* **to**
**string**
Destination URL to link to.
## ButtonProps secondaryAction
Supported props for Button used inside Page `secondaryAction` prop.\
\
`children` are not supported.\
Use `accessibilityLabel` instead.
* **accessibilityLabel**
**string**
**required**
A label used for buyers using assistive technologies. Needed because `children` passed to this component will be discarded.
* **onPress**
**() => void**
Callback that is run when the button is pressed.
* **to**
**string**
Destination URL to link to.
Examples
## Preview
### Examples
* #### Basic 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
**Title**
* Set clear expectations about the purpose and main topic of the page.
* Aim for 1-3 words.
* Use sentence case.
**Subtitle**
* Use to provide additional context or information that enhances the customer’s understanding of the page.
* Use subtitles sparingly and only when they add useful information that is distinct from the title.
**Buttons**
* Use for page-level actions only.
* If there is a single primary action for the page, display it as a primary button. Display all other page-level actions as secondary buttons.
* See [UX guidelines](https://shopify.dev/docs/apps/customer-accounts/order-action-menu-extensions/ux-guidelines) to learn more about the button logic for order actions.