Zero Results Panel
A zero results search state with the failed query, a spelling suggestion, the active filters that may hide matches, and tips for broadening.
A zero results search state with the failed query, a spelling suggestion, the active filters that may hide matches, and tips for broadening.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Zero Results Panel is the recovery surface a search shows when nothing matches: the failed query quaterly revenue repot is echoed in the bar with a 0 results count, a large empty state offers a corrected Search instead for quarterly revenue report, and two cards below explain why. One lists the active filters (Type: PDF, Owner: Maya Chen, Modified: Last 7 days) as removable tokens with a Clear all filters button, the other gives three tips for broadening the query.
Filters and tips are const arrays; the misspelled and corrected queries are two strings that model the did you mean pattern. Nothing here is a dead end: every panel points at a next action, from a one tap correction to removing the filter that hid the match.
Reach for this block as the empty state of any search results page, wired to your suggestion service and the current filter set. An empty result is the moment users are most likely to leave, so the surface earns its space by naming likely causes and offering a fix for each.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the no-match state for workspace search. Other zero-result surfaces:
Tip: always surface the active filters on an empty result; more often than not a stray facet, not the query, is what hid every match.