Empty state

Stands where content would be when there is nothing to show, and says what to do next.

<script setup lang="ts">
import { FsButton, FsEmptyState } from '@fivespark/ui'
</script>

<template>
  <FsEmptyState icon="file-text" title="Nog geen offertes" description="Maak een offerte voor een klant. Je vindt hem daarna hier terug.">
    <template #actions>
      <FsButton variant="primary" label="Offerte maken" />
    </template>
  </FsEmptyState>
</template>

Usage

<script setup lang="ts">
import { FsEmptyState } from '@fivespark/ui'
</script>

<template>
  <FsEmptyState title="Nog geen offertes" description="Maak een offerte voor een klant." />
</template>

Show it only once the answer is "nothing". While content loads, use a Skeleton; content that failed to load is an Alert.

Examples

No results

For a search or filter that matched nothing, use size="dense", leave out the icon and offer the way out. Inside a data table, put it in the table's empty slot.

<script setup lang="ts">
import { FsButton, FsEmptyState } from '@fivespark/ui'
</script>

<template>
  <FsEmptyState size="dense" title="Geen orders voor deze filters" description="Pas de filters aan of wis ze om alle orders te zien.">
    <template #actions>
      <FsButton size="dense" label="Filters wissen" />
    </template>
  </FsEmptyState>
</template>

Two actions

Give a secondary action before the primary one. Offer only actions the user may take.

<script setup lang="ts">
import { FsButton, FsEmptyState } from '@fivespark/ui'
</script>

<template>
  <FsEmptyState icon="building" title="Nog geen klanten" description="Voeg een klant toe of importeer je bestaande klantenlijst.">
    <template #actions>
      <FsButton label="Klanten importeren" />
      <FsButton variant="primary" label="Klant toevoegen" />
    </template>
  </FsEmptyState>
</template>

A link in the description

When the description needs markup, put it in the default slot instead of the description prop.

<script setup lang="ts">
import { FsEmptyState, FsLink } from '@fivespark/ui'
</script>

<template>
  <FsEmptyState icon="user" title="Je hebt geen toegang tot facturen">
    Vraag een beheerder om toegang, of lees <FsLink to="/help/rechten">wie dat kan</FsLink>.
  </FsEmptyState>
</template>

Title as a heading

Give a level when the empty state stands for a part of the page that has no heading of its own. Inside a region that has one, leave it out.

<script setup lang="ts">
import { FsEmptyState } from '@fivespark/ui'
</script>

<template>
  <FsEmptyState icon="circle-check" :level="2" title="Geen openstaande taken" description="Alle orders van vandaag zijn ingepland." />
</template>

An empty state is not announced when it appears. When it follows a search or filter, say so in the page's own status region.

API Reference

FsEmptyState

Prop	Type	Default	Description
description	string		Why there is nothing, and what to do, in one or two sentences. The default slot replaces it.
title	string		States the situation: "Nog geen offertes", "Geen orders voor deze filters".
level	2 | 3 | 4 | 5 | 6		Makes the title a heading of this level, when the empty state stands for a part of the page with no heading of its own. Leave it out inside a region or table that has one.
icon	"info" | "plus" | "pencil" | "trash" | "copy" | "x" | "download" | "upload" | "search" | "funnel" | "check" | "minus" | "external-link" | "eye" | "eye-off" | "settings" | "log-out" | "ellipsis" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-left" | "arrow-right" | "arrow-up" | "arrow-down" | "arrow-up-down" | "layout-dashboard" | "menu" | "circle-check" | "circle-x" | "triangle-alert" | "circle-question-mark" | "loader-circle" | "calculator" | "file-text" | "user" | "building" | "package" | "truck" | "euro" | "percent" | "clock" | "calendar" | "database" | "chart-column"		An icon above the title, at 24px, that hints at what is missing, such as `file-text` or `search`. Decorative. Leave it out in a table and in a dense panel.
size	"default" | "dense"	"default"	`dense` beside dense controls. Give the buttons in `actions` the same size.

Slot	Props	Description
default	any	The description, in place of `description`: for text with a link in it.
actions	any	Buttons below the message, for what to do next.