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

```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

value: `boolean`

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

value: `RemoteFragment`

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

### primaryActionAccessibilityLabel

value: `string`

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

### primaryActionLabel

value: `string`

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

### secondaryAction

value: `RemoteFragment`

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

### subtitle

value: `string`

The text to be used as subtitle.

### title

value: `string`

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

value: `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

value: `boolean`

Disables the button, disallowing any interaction.

### loading

value: `boolean`

Replaces content with a loading indicator.

### loadingLabel

value: `string`

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

### onPress

value: `() => void`

Callback that is run when the button is pressed.

### overlay

value: `RemoteFragment`

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

### to

value: `string`

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

value: `string`

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

### onPress

value: `() => void`

Callback that is run when the button is pressed.

### to

value: `string`

Destination URL to link to.