@empathyco/x-components/docs/API-reference/components/facets/x-components.clear-filters.md

Empathy X Components

---

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
<ClearFilters />
```

### Customizing its contents

In this example, show the custom message in button.

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

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

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