---

title: ClearFilters

---

# ClearFilters

Renders a simple button, emitting the needed events when clicked.

## Props

| Name                       | Description                                                            | Type                            | Default       |
| -------------------------- | ---------------------------------------------------------------------- | ------------------------------- | ------------- |
| <code>facetsIds</code>     | Array of facets ids used to get the selected filters for those facets. | <code>Array<Facet['id']></code> | <code></code> |
| <code>alwaysVisible</code> | Flag to render the component even if there are no filters selected.    | <code>boolean</code>            | <code></code> |

## Slots

| Name                 | Description | Bindings<br />(name - type - description) |
| -------------------- | ----------- | ----------------------------------------- |
| <code>default</code> |             |                                           |

## Events

A list of events that the component will emit:

- [`UserClickedClearAllFilters`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted after the user clicks the button to clear a certain facets filter. The event
  payload is the id of the facets that are going to be cleared.
- [`UserClickedClearAllFilters`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted after the user clicks the button. The event payload is undefined.

## Examples

This component renders a button, which on clicked emits the `UserClickedClearAllFilters` or
`UserClickedClearAllFilters` event.

### Basic usage

```vue
<template>
  <ClearFilters />
</template>

<script setup>
import { ClearFilters } from "@empathyco/x-components/facets";
</script>
```

### Customizing its contents

In this example, show the custom message in button.

```vue
<template>
  <ClearFilters v-slot="{ selectedFilters }">
    Delete {{ selectedFilters.length }} selected
  </ClearFilters>
</template>

<script setup>
import { ClearFilters } from "@empathyco/x-components/facets";
</script>
```

In this example, show the custom message in button with always visible a true and list of facets
ids.

```vue
<template>
  <ClearFilters
    v-slot="{ selectedFilters }"
    :alwaysVisible="true"
    :facetsIds="facetsIds"
  >
    Delete {{ selectedFilters.length }} selected
  </ClearFilters>
</template>

<script setup>
import { ClearFilters } from "@empathyco/x-components/facets";
import { ref } from "vue";

const facetsIds = ref(["brand_facet", "gender_facet"]);
</script>
```