Prototype Library

Empty State

Centered placeholder for empty lists or zero-result views: optional icon, required title, optional description, and slotted actions.

Inherited .astro import EsaEmptyState from '@esa/ecology/esa-empty-state.astro';

Preview

No results

Try adjusting your filters.

<EmptyState title="No results" description="Try adjusting your filters." />

Sizes

No results

Try adjusting your filters.

No results

Try adjusting your filters.

No results

Try adjusting your filters.

No results

Try adjusting your filters.

<EmptyState size="xs" title="No results" description="Try adjusting your filters." />
<EmptyState size="sm" title="No results" description="Try adjusting your filters." />
<EmptyState size="md" title="No results" description="Try adjusting your filters." />
<EmptyState size="lg" title="No results" description="Try adjusting your filters." />

Icon & actions

Pass an icon via the icon slot and action buttons via the default slot. The title alone is enough for a minimal state.

No documents yet

Upload your first document to get started.

<EmptyState title="No documents yet" description="Upload your first document to get started.">
  <svg slot="icon">…</svg>
  <button type="button">Upload document</button>
</EmptyState>

API

PropTypeDefaultDescription
title string — Required. The primary heading of the empty state.
description string — Optional supporting line below the title.
size 'xs' | 'sm' | 'md' | 'lg' 'md' Scales icon, text, and padding.

Slots

PropTypeDefaultDescription
icon slot — Inline SVG, scaled to the size variant.
default slot — Action buttons rendered below the description.

Accessibility

  • The title renders as an <h3> — keep heading order coherent within the page.
  • The icon is decorative (aria-hidden); meaning comes from the title and description.
  • Action buttons in the default slot keep native button semantics and focus order.