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 content of the page, typically containing the primary information, forms, or interactive elements that fulfill the page's purpose.
aside	Supplementary content displayed in a sidebar alongside the main content. Use for related information, navigation aids, or contextual actions that support the main content. This slot is only rendered when inlineSize is set to base.
breadcrumb-actions	Navigation links that help users understand their location within the app and navigate back to parent pages. Only accepts link components. Typically displays as a back arrow or breadcrumb trail in the page header.
primary-action	The main action button displayed in the page header, representing the primary action users can take on this page. Only accepts a single button component with a variant of primary. Common examples include "Create", "Save", or "Add".
secondary-actions	Additional action buttons displayed in the page header, providing alternative or supporting actions. Only accepts button group and button components with a variant of secondary or auto. These are visually de-emphasized compared to the primary action.