Empty State

Preview

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

Sizes

<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.

<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

Slots

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.

Theming surface

Every public token this component reads, extracted from its source at build time, split by blast radius: the hooks that belong to this component, then the shared and system tokens it consumes alongside everything else. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.

Type roles it names

This component does not set a size, weight, face or tracking of its own — it names a composite, and the composite carries all five. A composite is a class rather than a token, so none of it appears in the tables below; re-theme text by re-pointing the token family, not by editing the component.

Wired to this component

No other component reads these — re-point them and esa-empty-state is the only thing that moves.

Shared tokens it reads

Owned by a family or by the semantic layer. Still overridable — but scope the override (esa-foo { --form-border-color: … }) unless you mean to move everything that reads it. Reach says what else that is.