Skip to main content
The <ClearRefinements> component displays a button that clears all active refinements.

​
Import

import { ClearRefinements } from 'react-instantsearch';

​
Props

​
includedAttributes
string[]
Attributes to include when clearing refinements. By default, all refineable attributes are included.
<ClearRefinements includedAttributes={['brand', 'category']} />
​
excludedAttributes
string[]
Attributes to exclude from being cleared.
<ClearRefinements excludedAttributes={['query']} />
​
transformItems
function
Transform the refinement items before clearing them.
<ClearRefinements
  transformItems={(items) =>
    items.filter((item) => item.attribute !== 'query')
  }
/>
​
translations
object
Customize the text strings.
<ClearRefinements
  translations={{
    resetButtonText: 'Clear all filters',
  }}
/>
​
classNames
object
CSS classes to customize the component styling.

​
Example

import {
  InstantSearch,
  ClearRefinements,
  RefinementList,
  SearchBox,
} from 'react-instantsearch';
import { liteClient as algoliasearch } from 'algoliasearch/lite';

const searchClient = algoliasearch(
  'YourApplicationID',
  'YourSearchOnlyAPIKey'
);

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <SearchBox />
      <ClearRefinements />
      <RefinementList attribute="brand" />
      <RefinementList attribute="category" />
    </InstantSearch>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us