Empty Recovery - Everyday Interface Patterns

A static filtered empty recovery shows web buttons, Advanced, 0 matches, Remove Advanced filter, and No filtered results status.

Program

Filtered empty states should show the active query/filter, the zero-result consequence, and a clear recovery action without running search.

filtered_empty_recovery.html

Visuals: captured from real browser rendering

<section class="empty-recovery" aria-labelledby="empty-recovery-title"><h2 id="empty-recovery-title">Filtered empty recovery</h2><dl>
  <div><dt>Query</dt><dd>web buttons</dd></div>
  <div><dt>Filter</dt><dd><span class="chip">Advanced</span></dd></div>
  <div><dt>Results</dt><dd>0 matches</dd></div><div><dt>Recovery</dt><dd>Remove Advanced filter</dd></div>
  <div><dt>Status</dt><dd><span class="badge">No filtered results</span></dd></div></dl>
  <p class="note">Static empty recovery only; no live search, filter queries, recommendation engines, search index, storage, route, API, network, script, form submit, analytics, or live recovery runs.</p></section>
<style>
  .empty-recovery { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #b45309; padding: 12px; background: #fffbeb; }
  .empty-recovery dl { display: grid; gap: 8px; margin: 0; }
  .empty-recovery dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .empty-recovery dt { color: #475569; }
  .empty-recovery dd, .note { margin: 0; }
  .chip, .badge { border-radius: 999px; background: #fef3c7; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the empty recovery state.
The section is labelled by its visible heading.
Show the query row.
The query is exact pinned data.
Show the active filter.
The active filter is exact pinned data.
Show empty result and recovery.
The zero-result count and recovery action are exact pinned data.
Render the empty status.
The status badge says no filtered results are shown.
Check empty honesty.
Query, filter, zero results, recovery, status, and no live search.

step flow step(1) labels the source, step(2) shows the query, step(3) shows the filter, step(4) shows the zero result and recovery, step(5) shows the empty status, and step(6) checks the honesty note.

empty recovery The section heading names the filtered empty recovery surface.

empty rows Query, Filter, Results, Recovery, and Status values are exact pinned data.

no live recovery The lesson should not imply live search, filter queries, recommendation engines, search indexes, storage, routes, APIs, networks, scripts, form submits, analytics, or live recovery.