SEmptyState <s-empty-state>

Explains why a view has no content yet and points merchants to the first action to take. SEmptyState is the typed Vue 3 wrapper for Shopify's Polaris <s-empty-state> web component.

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

Best practices

• Explain the cause, then the fix. A bare "No products" heading leaves merchants guessing. Use the heading to say why nothing is there, and let the action carry the next step.
• Lead with one primary action. Use the primary-action slot for the one step that gets merchants out of the empty state, and place other options in secondary-actions.
• Word filtered results differently. A resource with nothing in it and a filter that matched nothing are different situations. For filtered results, tell merchants how to adjust the filter.
• Treat the graphic as extra. The heading and action do the work, so leave the graphic slot empty in dense layouts, and when you do use it, limit it to one icon or image.

<SEmptyState heading="You haven't added any products yet">
  <template #primary-action>
    <SButton variant="primary">Add product</SButton>
  </template>
  <template #secondary-actions>
    <SButton>Import products</SButton>
  </template>
</SEmptyState>

See Shopify's best practices for <s-empty-state> for the full guidance.

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.