SEmptyState <s-empty-state>

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

Example

Once a customer places an order, it will show up here. Learn more about ordersCreate orderImport orders

<script setup>
import { SEmptyState, SButton, SIcon, SText, SLink } from 'polaris-vue-elements'
</script>

<template>
  <SEmptyState heading="No orders yet">
    <template #graphic>
      <SIcon type="cart" size="large" />
    </template>
    <template #subheading>
      <SText>Once a customer places an order, it will show up here. <SLink href="https://help.shopify.com/orders" target="_blank">Learn more about orders</SLink></SText>
    </template>
    <template #primary-action>
      <SButton variant="primary">Create order</SButton>
    </template>
    <template #secondary-actions>
      <SButton variant="secondary">Import orders</SButton>
    </template>
  </SEmptyState>
</template>

Props

Prop	Type	Description
heading	string	The heading of the EmptyState.

Slots

Slot	Description
graphic	An illustration or symbol shown above the heading. Accepts a single Image or Icon, either directly or as the only child of a wrapping element.
primary-action	The main call to action, rendered below the text content. Accepts a single Button with a variant of primary; anything else is ignored with a development warning.
secondary-actions	An alternative action, rendered beside the primary one. Accepts a single Button with a variant of secondary or auto — despite the plural name, only one is rendered.
subheading	Supporting text below the heading, explaining what's missing or what to do next. Accepts Text and Link components.