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
- icon
- title
- suggestions
- actions
States
- partial
- success
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.