Empty results

Preview Available in release assets

Explain an empty server response and provide durable recovery destinations without recreating collection filters or hiding the zero-result state in client code.

Empty results in context

<section class="thin-empty-results" aria-labelledby="empty-results-title">
  <svg aria-hidden="true" data-icon>
    <use href="/icons/sprite.svg#search">
    </use>
  </svg>
  <h2 id="empty-results-title">No bags match these filters</h2>
  <p>Try removing a filter or return to all bags.</p>
  <p class="thin-empty-results-actions">
    <a href="/collections/bags" >Clear all filters</a>
    <a href="/collections">Browse collections</a>
  </p>
</section>

Show code

<section class="thin-empty-results" aria-labelledby="empty-results-title">
  <svg aria-hidden="true" data-icon>
    <use href="/icons/sprite.svg#search">
    </use>
  </svg>
  <h2 id="empty-results-title">No bags match these filters</h2>
  <p>Try removing a filter or return to all bags.</p>
  <p class="thin-empty-results-actions">
    <a href="/collections/bags" >Clear all filters</a>
    <a href="/collections">Browse collections</a>
  </p>
</section>

Anatomy

Labelled section
Optional decorative icon
Plain-language empty explanation
Primary clear-query destination
Alternative browsing destination

Variants and sizes

Filtered zero results
Empty collection
Search spelling recovery
Intrinsic narrow container

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

No filtered matches
Collection has no products
Unavailable catalog
Long localized explanation
Missing icon
Narrow container
Forced colors

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Recovery uses ordinary server destinations. The clear link removes the query in its href; enhancement may morph the returned collection but cannot be required to escape the empty state.

Accessibility

Use a real heading, explain the outcome in text, keep recovery labels specific out of context, treat the icon as decorative, and move focus only when a user-submitted update returns this section.

Contract

COMPOSE

Basis

Native links, headings, forms, lists, and status content; no product-specific APG widget

Evidence

tests/unit/library/ecommerce-patterns.test.ts

API

Use section.thin-empty-results with aria-labelledby and durable links. The server authors recovery URLs from the current collection and query.

Behavior tier: dependency-free

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

The explanation and recovery links remain complete, navigable content without CSS or JavaScript.

Assets and dependencies

/foundation.css
/layouts.css
/components.css
/patterns/ecommerce.css
/icons/sprite.svg

Dependencies: None

Source: packages/ui/src/style/ecommerce.ts