---
title: Page
description: >-
  The `Page` component serves as the main container for app content with preset
  layouts and heading controls. Use it to structure full-screen views with
  consistent navigation and content organization.


  `Page` is designed for full-screen modal interfaces and isn't suitable for
  inline content or partial page layouts within existing POS screens.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/page
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/page.md
---

# Page

The `Page` component serves as the main container for app content with preset layouts and heading controls. Use it to structure full-screen views with consistent navigation and content organization.

`Page` is designed for full-screen modal interfaces and isn't suitable for inline content or partial page layouts within existing POS screens.

## Properties

Configure the following properties on the `Page` component.

* heading

  string

  Default: : ''

  A title that describes the content of the section. If omitted and no secondary actions are provided, the section will be rendered without a header.

* id

  string

  A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features.

* subheading

  string

  A secondary page heading displayed under the main heading in the action bar.

## Slots

The `Page` component supports slots for additional content placement within the page. Learn more about [using slots](https://shopify.dev/docs/api/polaris/using-polaris-web-components#slots).

* aside

  HTMLElement

  The content to display in the page's sidebar. This area is for content that is tangentially related to the main content, such as navigation or contextual information. Use the `slot="aside"` attribute to place content in this area.

* secondary-actions

  HTMLElement

  A button element to display in the action bar. Only a single button is supported. Use the `slot="secondary-actions"` attribute to place content in this area.

### Examples

* #### Structure a page layout

  ##### Description

  Structure full-screen views using a \`Page\` component with built-in header and content layouts. This example shows a basic page with title and main content area.

  ##### Default

  ```html
  <s-page heading="Title">
    <s-button slot="secondary-actions">
      Action
    </s-button>
  </s-page>
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/page-default.png)

## Best practices

* **Write descriptive headings:** Use heading and subheading to describe the page's purpose and provide context about the current workflow step.
* **Place one primary action in action bar:** Use the secondary-actions slot for the page's most important action.
* **Use aside for supplementary content:** Reserve the aside slot for navigation, contextual help, or supporting information.

## Limitations

The `secondary-actions` slot supports only a single button element. Multiple actions in the action bar aren't supported and should be handled within the main content area.