Empty

Empty state

What a list, table or page shows when there is nothing in it — and, more usefully, what to do about that. Three cases: nothing yet (first run: say what will appear here and give the one action that makes it appear), no results (a search or filter matched nothing: offer to clear it), and couldn't load — which is not empty, it's an error; use Alert with a retry.

The title says what is empty; the description says what happens next; the default slot holds the action or two. #icon takes a glyph or an SVG on a small plate. variant="plain" drops the frame and halves the padding for use inside a table body or a list. The Page states block shows the three cases side by side.

A no results state appears while someone is typing, so a screen reader user won't notice it by itself: put the result count in a role="status" region next to the search field ("0 results") rather than making the empty state a live region.

Basic

∅No episodes yet

New episodes appear here after broadcast.

No episodes match “eriri ep.13”

<script setup lang="ts">
import { BlessButton, BlessEmpty } from "blessing-ui";
</script>

<template>
  <div class="col" style="max-width: 480px">
    <BlessEmpty title="No episodes yet" description="New episodes appear here after broadcast.">
      <template #icon>∅</template>
      <BlessButton size="sm">Browse</BlessButton>
      <BlessButton variant="ghost" size="sm">Refresh</BlessButton>
    </BlessEmpty>
    <BlessEmpty variant="plain" title="No episodes match “eriri ep.13”">
      <BlessButton variant="ghost" size="sm">Clear search</BlessButton>
    </BlessEmpty>
  </div>
</template>

Usage

import { BlessEmpty } from "blessing-ui";

API

Props

Name	Type	Default	Description
title	string	—
description	string	—
variant	"outline" | "plain"	"outline"	framed (default) or plain, for inside a table or list

Slots

Name	Scope	Description
icon	—
title	—
description	—
default	—