> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.
# ais-clear-refinements
> Lets users reset all applied search refinements.
```vue Signature theme={"system"}
```
## Import
To ensure optimal bundle sizes,
see [Optimize build size](/doc/guides/building-search-ui/going-further/improve-performance/vue#optimize-build-size).
```js Vue icon=code theme={"system"}
import { AisClearRefinements } from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3
export default {
components: {
AisClearRefinements
},
// ...
};
```
This imports all widgets, even the ones you don't use.
For more information, see [Get started with Vue InstantSearch](/doc/guides/building-search-ui/getting-started/vue).
```js JavaScript icon="code" theme={"system"}
import Vue from "vue";
import InstantSearch from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3
Vue.use(InstantSearch);
```
Preview this widget and its behavior.
## About this widget
The `ais-clear-refinements` widget displays a button that lets users clears every currently applied refinement.
## Examples
```vue Vue icon=code theme={"system"}
```
## Props
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`](#param-included-attributes).
```vue Vue icon=code theme={"system"}
```
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`](#param-excluded-attributes).
```vue Vue icon=code theme={"system"}
```
A function that receives the list of items before they are displayed.
It should return a new array with the same structure.
Use this to transform, filter, or reorder the items.
The function also has access to the full `results` data,
including all standard [response parameters](/doc/guides/building-search-ui/going-further/backend-search/in-depth/understanding-the-api-response/)
and [parameters from the helper](https://community.algolia.com/algoliasearch-helper-js/reference.html#query-parameters),
such as `disjunctiveFacetsRefinements`.
To [prevent creating infinite loops](https://support.algolia.com/hc/en-us/articles/4406511683217-Vue-InstantSearch-How-do-I-prevent-infinite-loops),
avoid passing arrays, objects, or functions directly in the template.
These values aren't referentially equal on each render,
which causes the widget to re-register every time.
Instead, define them in your component's `data` option and reference them in the template.
```vue Vue icon=code theme={"system"}
```
The [CSS classes you can override](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/vue#style-your-widgets):
* `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.
```vue Vue icon=code theme={"system"}
```
## Customize the UI
The slot to override the complete DOM output of the widget.
When you implement this slot,
none of the other slots will change the output,
as the default slot surrounds them.
**Scope**
* `canRefine: boolean`. Are there any refinements?
* `refine: () => void`. The function to clear all the refinements.
* `createURL: () => string`. The function to return a link for the search without the refinements.
```vue Vue icon=code theme={"system"}
Clear all refinements
```
The slot to override the DOM output for the label of the reset button.
```vue Vue icon=code theme={"system"}
Clear refinements
```
## HTML output
```html HTML icon=code-xml theme={"system"}