# 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.
### Basic Page

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

```


## 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.