Skip to main content

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.

Anchor to propertiesProperties

Anchor to heading
heading
string

The main page heading

Anchor to id
id
string

A unique identifier for the element.

Anchor to subheading
subheading
string

The text to be used as subheading.

Anchor to slotsSlots

Anchor to breadcrumb-actions
breadcrumb-actions
HTMLElement

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

Anchor to primary-action
primary-action
HTMLElement

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

Anchor to secondary-actions
secondary-actions
HTMLElement

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

Anchor to breadcrumb-actions slot button propertiesBreadcrumb-actions slot button properties

Supported props for Button used inside Page breadcrumb-actions slot.

children are not supported.
Use accessibilityLabel instead.

Anchor to accessibilityLabel
accessibilityLabel
string
required

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

Anchor to click
click
((event: <typeof buttonTagName>) => void) | null

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

Anchor to href
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.

Anchor to primary-action slot button propertiesPrimary-action slot button properties

Supported props for Buttons used inside Page primary-action slot.

children only support text.

Anchor to accessibilityLabel
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.

Anchor to click
click
((event: <typeof buttonTagName>) => void) | null

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

Anchor to command
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.
Anchor to commandFor
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.

Anchor to disabled
disabled
boolean
Default: false

Disables the button, disallowing any interaction.

Anchor to href
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.
Anchor to loading
loading
boolean
Default: false

Replaces content with a loading indicator.

Anchor to secondary-actions slot button propertiesSecondary-actions slot button properties

Supported props for Button used inside Page secondary-actions slot.

children only support text.

Anchor to accessibilityLabel
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.

Anchor to click
click
((event: <typeof buttonTagName>) => void) | null

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

Anchor to command
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.
Anchor to commandFor
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.

Anchor to disabled
disabled
boolean
Default: false

Disables the button, disallowing any interaction.

Anchor to href
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.
Anchor to loading
loading
boolean
Default: false

Replaces content with a loading indicator.

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

Anchor to best-practicesBest 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.

Was this page helpful?