Choose a version:

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.

Was this section helpful?

Anchor to slotsSlots

Anchor to breadcrumb-actions breadcrumb-actions HTMLElement: The breadcrumb actions to perform, provided as button type elements.
Anchor to primary-action primary-action HTMLElement: The primary action to perform, provided as a button type element.
Anchor to secondary-actions secondary-actions HTMLElement: The secondary actions to perform, provided as button type elements.

PageElementSlotsDocs

breadcrumb-actions
The breadcrumb actions to perform, provided as button type elements.
```
HTMLElement
```
primary-action
The primary action to perform, provided as a button type element.
```
HTMLElement
```
secondary-actions
The secondary actions to perform, provided as button type elements.
```
HTMLElement
```

PageElementSlots

Was this section helpful?

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.

Docs_Page_Button_BreadcrumbAction

accessibilityLabel
A label used for buyers using assistive technologies. Needed because `children` passed to this component will be discarded.
```
string
```
click
Callback when the button is activated. This will be called before the action indicated by `type`.
```
((event: CallbackEventListener<typeof buttonTagName>) => void) | null
```
href
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.
```
string
```

export interface Docs_Page_Button_BreadcrumbAction
  extends Pick<ButtonProps, 'click' | 'href'> {
  /**
   * A label used for buyers using assistive technologies. Needed because `children` passed to this component will be discarded.
   */
  accessibilityLabel: ButtonProps['accessibilityLabel'];
}

CallbackEventListener

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

CallbackEvent

TEvent & {
  currentTarget: HTMLElementTagNameMap[TTagName];
}

Was this section helpful?

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.

Docs_Page_Button_PrimaryAction

accessibilityLabel
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.
```
string
```
click
Callback when the button is activated. This will be called before the action indicated by `type`.
```
((event: CallbackEventListener<typeof buttonTagName>) => void) | null
```
command
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.
```
'--auto' | '--show' | '--hide' | '--toggle' | '--copy'
```
commandFor
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.
```
string
```
disabled
Disables the button, disallowing any interaction.
```
boolean
```
href
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.
```
string
```
loading
Replaces content with a loading indicator.
```
boolean
```

export interface Docs_Page_Button_PrimaryAction
  extends Pick<
    ButtonProps,
    | 'click'
    | 'loading'
    | 'disabled'
    | 'accessibilityLabel'
    | 'href'
    | 'command'
    | 'commandFor'
  > {}

CallbackEventListener

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

CallbackEvent

TEvent & {
  currentTarget: HTMLElementTagNameMap[TTagName];
}

Was this section helpful?

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.

Docs_Page_Button_SecondaryAction

accessibilityLabel
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.
```
string
```
click
Callback when the button is activated. This will be called before the action indicated by `type`.
```
((event: CallbackEventListener<typeof buttonTagName>) => void) | null
```
command
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.
```
'--auto' | '--show' | '--hide' | '--toggle' | '--copy'
```
commandFor
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.
```
string
```
disabled
Disables the button, disallowing any interaction.
```
boolean
```
href
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.
```
string
```
loading
Replaces content with a loading indicator.
```
boolean
```

export interface Docs_Page_Button_SecondaryAction
  extends Pick<
    ButtonProps,
    | 'click'
    | 'loading'
    | 'disabled'
    | 'accessibilityLabel'
    | 'href'
    | 'command'
    | 'commandFor'
  > {}

CallbackEventListener

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

CallbackEvent

TEvent & {
  currentTarget: HTMLElementTagNameMap[TTagName];
}

Was this section helpful?

Basic Page

Preact

import '@shopify/ui-extensions/preact';

import {render} from 'preact';

export default async () => {

render(<Extension />, document.body);

};

function Extension() {

return (

<s-page heading="Order #1411" subheading="Confirmed Oct 5">

<s-button

slot="primary-action"

onClick={() => console.log('Primary action')}

Buy again

</s-button>

<s-button

slot="secondary-actions"

onClick={() => console.log('Secondary action 1')}

Secondary action 1

</s-button>

<s-button

slot="secondary-actions"

onClick={() => console.log('Secondary action 2')}

Secondary action 2

</s-button>

<s-button

slot="breadcrumb-actions"

accessibilitylabel="Button"

href="shopify://customer-account/orders"

Content

</s-page>

);

}

examples

Basic Page

Preact

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default async () => {
  render(<Extension />, document.body);
};

function Extension() {
  return (
    <s-page heading="Order #1411" subheading="Confirmed Oct 5">
      <s-button
        slot="primary-action"
        onClick={() => console.log('Primary action')}
      >
        Buy again
      </s-button>
      <s-button
        slot="secondary-actions"
        onClick={() => console.log('Secondary action 1')}
      >
        Secondary action 1
      </s-button>
      <s-button
        slot="secondary-actions"
        onClick={() => console.log('Secondary action 2')}
      >
        Secondary action 2
      </s-button>
      <s-button
        slot="breadcrumb-actions"
        accessibilitylabel="Button"
        href="shopify://customer-account/orders"
      />
      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

Heading

Set clear expectations about the purpose and main topic of the page.
Aim for 1-3 words.
Use sentence case.

Subheading

Use to provide additional context or information that enhances the customer’s understanding of the page.
Use subheadings sparingly and only when they add useful information that is distinct from the heading.

Buttons

Use for page-level actions only.
If there is a single primary action for the page, display it as a primary button. Display all other page-level actions as secondary buttons.
See UX guidelines to learn more about the button logic for order actions.

Was this section helpful?

Page

Anchor to propertiesProperties

PagePropsDocs

Anchor to slotsSlots

PageElementSlotsDocs

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

Docs_Page_Button_BreadcrumbAction

CallbackEventListener

CallbackEvent

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

Docs_Page_Button_PrimaryAction

CallbackEventListener

CallbackEvent

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

Docs_Page_Button_SecondaryAction

CallbackEventListener

CallbackEvent

examples

Basic Page

Preact

Preview

Anchor to best-practicesBest Practices