---
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-10
api_name: customer-account-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components/structure/page
  md: https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components/structure/page.md
---

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

## Properties

* heading

  string

  The main page heading

* id

  string

  A unique identifier for the element.

* subheading

  string

  The text to be used as subheading.

## Slots

* breadcrumb-actions

  HTMLElement

  The breadcrumb actions for the page. Accepts a single Button element with restricted properties (see below).

* primary-action

  HTMLElement

  The primary action for the page. Accepts a single Button element with restricted properties (see below).

* secondary-actions

  HTMLElement

  The secondary actions for the page. Accepts multiple Button elements with restricted properties (see below).

## Breadcrumb-actions slot button properties

Supported props for Button used inside Page `breadcrumb-actions` slot.\
\
`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.

* click

  ((event: CallbackEventListener\<typeof buttonTagName>) => void) | null

  Callback when the button is activated. This will be called before the action indicated by `type`.

* href

  string

  The URL to link to.

  * If set, it will navigate to the location specified by `href` after executing the `onClick` callback.
  * If a `commandFor` is set, the `command` will be executed instead of the navigation.

### CallbackEventListener

```ts
(EventListener & {
      (event: CallbackEvent<TTagName, TEvent>): void;
    }) | null
```

### CallbackEvent

```ts
TEvent & {
  currentTarget: HTMLElementTagNameMap[TTagName];
}
```

## Primary-action slot button properties

Supported props for Buttons used inside Page `primary-action` slot.\
\
`children` only support text.

* accessibilityLabel

  string

  A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.

  Use this when using only an icon or the button text is not enough context for users using assistive technologies.

* click

  ((event: CallbackEventListener\<typeof buttonTagName>) => void) | null

  Callback when the button is activated. This will be called before the action indicated by `type`.

* command

  '--auto' | '--show' | '--hide' | '--toggle' | '--copy'

  Default: '--auto'

  Sets the action the `commandFor` should take when this clickable is activated.

  See the documentation of particular components for the actions they support.

  * `--auto`: a default action for the target component.
  * `--show`: shows the target component.
  * `--hide`: hides the target component.
  * `--toggle`: toggles the target component.
  * `--copy`: copies the target ClipboardItem.

* commandFor

  string

  ID of a component that should respond to activations (e.g. clicks) on this component.

  See `command` for how to control the behavior of the target.

* disabled

  boolean

  Default: false

  Disables the button, disallowing any interaction.

* href

  string

  The URL to link to.

  * If set, it will navigate to the location specified by `href` after executing the `onClick` callback.
  * If a `commandFor` is set, the `command` will be executed instead of the navigation.

* loading

  boolean

  Default: false

  Replaces content with a loading indicator.

### CallbackEventListener

```ts
(EventListener & {
      (event: CallbackEvent<TTagName, TEvent>): void;
    }) | null
```

### CallbackEvent

```ts
TEvent & {
  currentTarget: HTMLElementTagNameMap[TTagName];
}
```

## Secondary-actions slot button properties

Supported props for Button used inside Page `secondary-actions` slot.\
\
`children` only support text.

* accessibilityLabel

  string

  A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.

  Use this when using only an icon or the button text is not enough context for users using assistive technologies.

* click

  ((event: CallbackEventListener\<typeof buttonTagName>) => void) | null

  Callback when the button is activated. This will be called before the action indicated by `type`.

* command

  '--auto' | '--show' | '--hide' | '--toggle' | '--copy'

  Default: '--auto'

  Sets the action the `commandFor` should take when this clickable is activated.

  See the documentation of particular components for the actions they support.

  * `--auto`: a default action for the target component.
  * `--show`: shows the target component.
  * `--hide`: hides the target component.
  * `--toggle`: toggles the target component.
  * `--copy`: copies the target ClipboardItem.

* commandFor

  string

  ID of a component that should respond to activations (e.g. clicks) on this component.

  See `command` for how to control the behavior of the target.

* disabled

  boolean

  Default: false

  Disables the button, disallowing any interaction.

* href

  string

  The URL to link to.

  * If set, it will navigate to the location specified by `href` after executing the `onClick` callback.
  * If a `commandFor` is set, the `command` will be executed instead of the navigation.

* loading

  boolean

  Default: false

  Replaces content with a loading indicator.

### CallbackEventListener

```ts
(EventListener & {
      (event: CallbackEvent<TTagName, TEvent>): void;
    }) | null
```

### CallbackEvent

```ts
TEvent & {
  currentTarget: HTMLElementTagNameMap[TTagName];
}
```

### Examples

* #### Code

  ##### Default

  ```jsx
  <s-page
    heading="Order #1411"
    subheading="Confirmed Oct 5"
  >
    <s-button slot="primary-action">
      Buy again
    </s-button>
    <s-button slot="secondary-actions">
      Edit order
    </s-button>
    <s-button slot="secondary-actions">
      Cancel order
    </s-button>
    <s-button
      slot="breadcrumb-actions"
      accessibilityLabel="Back to orders"
    ></s-button>
    Content
  </s-page>
  ```

## Preview

![An example of the Page component shows the page title, description, and order action buttons on the Order status page.](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2025-10/page-default.png)

## Best practices

Use these best practices to deliver a clear and accessible experience in your extensions.

### Write clear, focused headings

State the main purpose of the page in a few words and use sentence case for readability.

### Use subheadings only when they add value

Add a subheading when it provides helpful context that’s different from the heading. Keep it brief and use sparingly to avoid clutter.

### Add page‑level actions thoughtfully

Include buttons in the header only for actions that affect the entire page or flow. Make the main action a primary button, keep lesser actions secondary, limit the total number, and follow established UX patterns—especially for order actions.