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.

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

PageProps

PageProps

loading

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

The action grouping, provided as button(s), that is placed in the primary position of the page.

primaryActionAccessibilityLabel

Accessibility label for the primary action grouping. If an accessibility label is not provided, default text is used.

primaryActionLabel

Label for the primary action grouping. If a label is not provided, default text is used.

secondaryAction

The action grouping, provided as button(s), that is placed in the secondary position of the page.

subtitle

The text to be used as subtitle.

title

The text to be used as title.

ButtonProps primaryAction

Supported props for Buttons used inside Page `primaryAction` prop.<br><br>`children` only support text.

Docs_Page_Button_PrimaryAction

accessibilityLabel

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

Disables the button, disallowing any interaction.

loading

Replaces content with a loading indicator.

loadingLabel

Accessible label for the loading indicator when user prefers reduced motion. This value is only used if `loading` is true.

onPress

Callback that is run when the button is pressed.

overlay

An overlay component to render when the user interacts with the component.

to

Destination URL to link to.

ButtonProps secondaryAction

Supported props for Button used inside Page `secondaryAction` prop.<br><br>`children` are not supported.<br>Use `accessibilityLabel` instead.

Docs_Page_Button_SecondaryAction

accessibilityLabel

A label used for buyers using assistive technologies. Needed because `children` passed to this component will be discarded.

onPress

Callback that is run when the button is pressed.

to

Destination URL to link to.