Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Choose a version:

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 or BlockStack.

Support

Targets (25)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the Page component.

Anchor to title title string required: The title displayed at the top of the page.
Anchor to loading 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.
Anchor to primaryAction 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.
Anchor to primaryActionAccessibilityLabel primaryActionAccessibilityLabel string Default: "More actions": A label announced by assistive technologies for the primary action grouping.
Anchor to primaryActionLabel primaryActionLabel string Default: "More actions": A visible label for the primary action grouping. Displayed as the text trigger when actions overflow into a menu.
Anchor to secondaryAction 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.
Anchor to subtitle subtitle string: An optional subtitle displayed below the title.

Anchor to Primary actionsPrimary actions

Use the primaryAction prop to surface the most important actions for the page. Primary action buttons appear prominently in the page header.

Anchor to accessibilityLabel 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.
Anchor to disabled disabled boolean Default: false: Whether the button is disabled. A disabled button is non-interactive and visually de-emphasized.
Anchor to loading loading boolean Default: false: Whether to replace the button content with a loading indicator.
Anchor to loadingLabel loadingLabel string: An accessible label for the loading indicator, announced when the user prefers reduced motion. Only used when loading is true.
Anchor to onPress onPress () => void: A callback fired when the button is pressed.
Anchor to overlay overlay RemoteFragment: An overlay component rendered when the user interacts with the button, such as a modal or popover.
Anchor to to to string: A destination URL that the button navigates to. When set, the button behaves as a link.

Anchor to Secondary actionsSecondary 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.

Anchor to accessibilityLabel accessibilityLabel string required: A label announced by assistive technologies that describes the button's purpose. Required because children passed to this component are discarded.
Anchor to onPress onPress () => void: A callback fired when the button is pressed.
Anchor to to to string: A destination URL that the button navigates to. When set, the button behaves as a link.

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, subtitle, and action buttons. The primary action appears prominently, while secondary actions are grouped separately.

Display an order status page

A Page component showing a page title, description, and order action buttons.

Display an order status page

import {

Page,

Button,

reactExtension,

} from '@shopify/ui-extensions-react/customer-account';

import React from 'react';

export default reactExtension('customer-account.page.render', () => <App />);

function App() {

return (

<Page

title="Order #1411"

subtitle="Confirmed Oct 5"

secondaryAction={<Button accessibilityLabel="Button" onPress={() => {}}/>}

primaryActionLabel="Manage"

primaryAction={

<Button onPress={() => {}}>Buy again</Button>

<Button onPress={() => {}}>Second action</Button>

<Button onPress={() => {}}>Third action</Button>

</>

}

Content

</Page>

);

}

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);

}

React

import {
  Page,
  Button,
  reactExtension,
} from '@shopify/ui-extensions-react/customer-account';
import React from 'react';

export default reactExtension('customer-account.page.render', () => <App />);

function App() {
  return (
    <Page
      title="Order #1411"
      subtitle="Confirmed Oct 5"
      secondaryAction={<Button accessibilityLabel="Button" onPress={() => {}}/>}
      primaryActionLabel="Manage"
      primaryAction={
        <>
          <Button onPress={() => {}}>Buy again</Button>
          <Button onPress={() => {}}>Second action</Button>
          <Button onPress={() => {}}>Third action</Button>
        </>
      }
    >
      Content
    </Page>
  );
}

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);
}

Anchor to Best practicesBest 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 for button logic on order pages.

Anchor to LimitationsLimitations

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.

Was this page helpful?