This kit can be implemented in a variety of ways.
To see examples of how to implement this kit in production visit the /dev_docs/search page in production.

All React examples are wrapped in a {closePopover} method to ensure the popover closes on click of "Apply".

The min_width prop for the popover inside of filter is used in all the examples and is set to 360px. That is the min_width prop we recommend using as it is the same pixel value as our max_width sm global prop.


To display the "No Filters Selected" text, the filters prop must be null. As a suggestion, check the values of each key in your filters object. If they are all falsy, return null.

No Background

To remove the background from a filter, add the prop background with a value of false.


No Sort

To display results, use templates single or default.

Filter Only

Sort Only

Max Width for Popover Inside of Filter

Filter can leverage the max-width property. Learn more in our visual guidelines.

Max Height for Popover Inside of Filter

Filter Placement

Click the filter button above to toggle the popover.

To change the filter's popover position, use the placement prop with one of the positions:
"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"

UI Samples using Filter Kit

Get the full picture. See how this kit is used in our samples.

Available Props