SPage <s-page>

import { SPage } from 'polaris-vue-elements'

Example

No orders have been placed yet.Create order

<script setup>
import { SPage, SSection, SParagraph, SButton } from 'polaris-vue-elements'
</script>

<template>
  <SPage heading="Orders">
    <template #primary-action>
      <SButton variant="primary">Create order</SButton>
    </template>

    <SSection heading="Recent activity">
      <SParagraph>No orders have been placed yet.</SParagraph>
    </SSection>
  </SPage>
</template>

Props

Prop	Type	Description
heading	string	The main page heading
inlineSize	"base" | "small" | "large"	The inline size of the page - base corresponds to a set default inline size - large full width with whitespace

Slots

Slot	Description
default	The main page content displayed within the page component, which serves as the primary container for the page's information and interface elements.
aside	The content to display in the aside section of the page. This slot is only rendered when inlineSize is "base".
breadcrumb-actions	The navigation back actions for the page. Only accepts link components.
primary-action	The primary action for the page. Only accepts a single button component with a variant of primary.
secondary-actions	The secondary actions for the page. Only accepts button group and button components with a variant of secondary or auto.
supplemental-start	A slot for content that comes before the main content, such as an s-banner.