Applied Filters Summary
Active filter summary bar that renders the current filter state as a plain sentence with removable tokens and a result count.
Active filter summary bar that renders the current filter state as a plain sentence with removable tokens and a result count.
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
Applied Filters Summary is the human-readable state bar that sits above a result list, turning active filter keys into a plain sentence: Showing Open, assigned to you, due this week. Below the sentence three removable filter tokens render the same values as pill chips with individual X affordances. A result count, 14 of 330 tasks match, anchors the right edge alongside a badge reading 3 filters active. Filter state is reflected in the URL so the current view can be bookmarked or shared as a link.
Active filters are one array of key-label pairs. The buildSentence helper composes them into prose so the bar reads naturally regardless of how many filters are active.
Reach for this block immediately above any filtered list or table, wired to your URL search params and filter model. Pair it with the multi-facet panel to give users both the editing surface and the confirmation of what is active.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the active-filter confirmation bar above a task list. Other applied-filter contexts:
Tip: encoding filter state in the URL means users can share an exact view as a link without any extra work.