API Reference / Vue InstantSearch Widgets / ais-clear-refinements

ais-clear-refinements

Widget signature 
<ais-clear-refinements
  // Optional parameters
  :excluded-attributes="string[]"
  :included-attributes="string[]"
  :transform-items="function"
  :class-names="object"
/>
See code examples
See Live example

About this widget

The ais-clear-refinements widget displays a button that lets the user clears every currently applied refinement.

Examples

Copy 
1

<ais-clear-refinements />

Props

excluded-attributes
type: string[]
default: ["query"]
Optional

The attributes to exclude from the refinements to clear. In the example below, the attribute brand is excluded from the refinements to clear.

This can’t be used with included-attributes.
Copy 
1
2
3

<ais-clear-refinements
  :excluded-attributes="['brand']"
/>
included-attributes
type: string[]
default: []
Optional

The attributes to include in the refinements to clear (all by default). In the example below, only the categories attribute is included in the refinements to clear.

This can’t be used with excluded-attributes.
Copy 
1
2
3

<ais-clear-refinements
  :included-attributes="['categories']"
/>
transform-items
type: function
default: items => items
Optional

Receives the items, and is called before displaying them. Should return a new array with the same shape as the original array. Useful for mapping over the items to transform, and remove or reorder them.
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<template>
  <!-- ... -->
  <ais-current-refinements :transform-items="transformItems" />
</template>

<script>
  export default {
    methods: {
      transformItems(items) {
        return items.sort(item => item.attribute);
      },
    },
  };
</script>
class-names
type: object
default: {}
Optional

The CSS classes to override.

  • ais-ClearRefinements: the root container of the widget.
  • ais-ClearRefinements-button: the button of the widget.
  • ais-ClearRefinements-button--disabled: the disabled button of the widget.
Copy 
1
2
3
4
5
6
7

<ais-clear-refinements
  :class-names="{
    'ais-ClearRefinements': 'MyCustomClearRefinements',
    'ais-ClearRefinements-button': 'MyCustomClearRefinementsButton',
    // ...
  }"
/>

Customize the UI

default

The slot to override the complete DOM output of the widget.

Scope

  • canRefine: boolean: whether or not there are refinements.
  • refine: () => void: the function to clear all the refinements.
  • createURL: () => void: the function to return a link for the search without the refinements.
Copy 
1
2
3
4
5
6
7
8
9
10
11

<ais-clear-refinements>
  <div slot-scope="{ canRefine, refine, createURL }">
    <a
      :href="createURL()"
      @click.prevent="refine"
      v-if="canRefine"
    >
      Clear all refinements
    </a>
  </div>
</ais-clear-refinements>
resetLabel

The slot to override the DOM output for the label of the reset button.
Copy 
1
2
3

<ais-clear-refinements>
  <span slot="resetLabel">Clear refinements</span>
</ais-clear-refinements>

HTML output

Copy 
1
2
3
4
5

<div class="ais-ClearRefinements">
  <button class="ais-ClearRefinements-button">
    Clear refinements
  </button>
</div>

Did you find this page helpful?

Vue InstantSearch v3