Empty State

SEmptyState is the placeholder shown where content would be: an empty table, a search with no matches, a list before the first record. It centers a media block, a title, a description and action buttons. Without a title the text comes from the locale dictionary (noData), so an untranslated placeholder never shows up.

The block is static content, not a live region: it carries no role="status" and is not announced on its own. The icon and the image are decorative — the meaning is carried by the title.

Basic usage

No invoices yet

New invoices will appear here as soon as the first order is paid.

<template>
  <SEmptyState
    icon="folder"
    title="No invoices yet"
    description="New invoices will appear here as soon as the first order is paid."
  />
</template>

Actions

The actions slot holds the buttons that resolve the empty state. The default slot adds anything extra under the description.

Nothing found

No orders match the current filters.

<template>
  <SEmptyState
    icon="search"
    title="Nothing found"
    description="No orders match the current filters."
  >
    <template #actions>
      <SButton variant="outline"> Reset filters </SButton>
      <SButton> New order </SButton>
    </template>
  </SEmptyState>
</template>

Sizes and accent

size scales the icon, the spacing and the type scale. color accents the media block with a name from the palette.

No notifications

The warehouse is empty

Receive a shipment to start tracking stock.

<template>
  <SEmptyState
    size="sm"
    icon="bell"
    title="No notifications"
  />
  <SEmptyState
    size="lg"
    icon="package"
    color="teal"
    title="The warehouse is empty"
    description="Receive a shipment to start tracking stock."
  />
</template>

Illustration

image replaces the icon with a picture; the icon slot replaces both with any markup.

Inbox zero

Every message has been handled.

<template>
  <SEmptyState
    image="/illustrations/inbox.svg"
    title="Inbox zero"
    description="Every message has been handled."
  />

  <SEmptyState
    title="Inbox zero"
    description="Every message has been handled."
  >
    <template #icon>
      <SIcon
        icon="mail"
        :size="40"
        color="positive"
      />
    </template>
  </SEmptyState>
</template>

Inside other components

The empty slot of SAutocomplete takes arbitrary markup, so the same placeholder can stand in for the bare line of text. Use the sm size there: the block has to fit inside the suggestion panel.

<template>
  <SAutocomplete
    v-model="city"
    v-model:search="query"
    :options="options"
    label="City"
  >
    <template #empty>
      <SEmptyState
        size="sm"
        icon="search"
        title="Nothing found"
      />
    </template>
  </SAutocomplete>
</template>

API

Props

Name	Type	Default	Description
title	string	undefined	Title of the placeholder. Without it the text comes from the locale dictionary.
description	string	undefined	Explanatory text under the title (can be replaced with the description slot).
icon	string	undefined	Icon above the title: a registry name (search, folder, …) or a raw SVG path. The image prop and the icon slot take precedence.
image	string	undefined	URL of an illustration shown instead of the icon. It is decorative: the accessible name of the block is carried by the title.
size	"md" | "sm" | "lg"	"md"	Size: scales the icon, the spacing and the type scale.
color	string	undefined	Icon accent color: a name from the palette (primary/teal/teal-10).

Slots

Name	Description
icon	Media above the title: replaces the icon and the image.
title	Title (alternative to the title prop).
description	Description (alternative to the description prop).
default	Extra content under the description: a hint, a form, a list of next steps.
actions	Action buttons at the bottom of the block.