errors pattern
No results
Search or filter returned zero results. Different from no-data (resource itself has nothing). The user typed or filtered into an empty intersection.
When to use it
Search query returned nothing; filter combination is too restrictive.
- User immediately understands it's a no-match, not an error
- Suggest a concrete way to broaden the result set
- Spelling-fix surfaced when confidence is high
- No layout shift — preserve the result-region container size
Layout regions
- container
- Inline region inside the result area — never full-page.
- icon
- SF Symbol "magnifyingglass" hierarchical at 32pt; muted tint
- title
- Echoes the query: "No results for "{query}""
- suggestions
- Did-you-mean + spelling fix when applicable
- actions
- Clear-filters primary + the active filter chips beneath
States
- partial
- No matches with current query + filters
- success
- Did-you-mean suggestion accepted
Example
<div role="status" aria-live="polite"><Icon name="search" variant="hierarchical" size="xl" /><h2>No results for "{q}"</h2>{suggestion && <p>Did you mean <button onClick={() => setQ(suggestion)}>{suggestion}</button>?</p>}<Stack variant="row">{filters.map((f) => <Tag onRemove={() => removeFilter(f.id)} key={f.id}>{f.label}</Tag>)}</Stack><Button onClick={clearAll}>Clear filters</Button></div>The full No results pattern specifies 5 exact microcopy strings, 2 motion specs, 6 composition rules — all gated behind the full recipe. Get the full recipe.