Faceted refinement is the pattern that lets users narrow a result list by multiple dimensions at once — price, brand, category, status, owner. It looks simple from the outside; the depth shows up in the edge cases. What happens when a filter selection produces zero results? When two filters combine to produce a contradiction? When an applied filter set should be shareable via URL?
These references handle filtering as a first-class system layer with documented patterns for applied state, count badges, clear-all affordances, and degraded behavior when filters return empty.
- 01Filter state lives in the URL, so users can share a refined view as a link.
- 02Applied filters render as removable chips above the result list.
- 03Each filter group shows the count of results that filter would produce, so users can avoid empty paths.
- 04A clear, single "clear all" affordance that resets filters but preserves the search query.
- 05Empty-after-filter state offers the clear-filters action and shows what was applied.
- 01Filter state lives only in JS; refresh loses the user's refinements.
- 02Applied filters are buried in a sidebar; users forget what they've applied and abandon.
- 03Filter selection produces an empty result list with no explanation and no escape hatch.
eBay Evo
eBay
FilterDrawer
Mobile-first refinement surface with stacked filter groups, applied-chip review, and sticky apply — built for marketplace search at scale.
Polaris
Shopify
Filters
Documented filter pattern with applied-chip rendering, search-within-filter, and explicit clear-all behavior — built for merchant admin.
Atlassian Design System
Atlassian
Filtered Search
Token-style query builder (status:open assignee:me) — the reference for power-user filter expression.
Pajamas
GitLab
Filtered Search
Composable search-bar with token-style filters and saved-search persistence — the reference for query-builder-style search input.