@empathyco/x-components/docs/API-reference/components/history-queries/x-components.remove-history-query.md

Empathy X Components

---

title: RemoveHistoryQuery

---

# RemoveHistoryQuery

Button that when it is pressed emits the
HistoryQueriesXEvents.UserPressedRemoveHistoryQuery event, expressing the user
intention to remove a query in the history.

## Props

| Name                      | Description                                                           | Type                      | Default       |
| ------------------------- | --------------------------------------------------------------------- | ------------------------- | ------------- |
| <code>historyQuery</code> | The historyQuery that will be removed when clicking the clear button. | <code>HistoryQuery</code> | <code></code> |

## Slots

| Name                 | Description                                            | Bindings<br />(name - type - description) |
| -------------------- | ------------------------------------------------------ | ----------------------------------------- |
| <code>default</code> | (Required) Button content with a text, an icon or both | None                                      |

## Events

A list of events that the component will emit:

- [`UserPressedRemoveHistoryQuery`](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 the history query
  data.

## Examples

### Basic Example

You can customize the content that this component renders. To do so, simply use the default slot.

```vue
<template>
  <RemoveHistoryQuery :historyQuery="historyQuery">
    <img class="x-history-query__icon" src="./my-awesome-clear-icon.svg" />
  </RemoveHistoryQuery>
</template>

<script setup>
import { RemoveHistoryQuery } from "@empathyco/x-components/history-queries";
import { ref } from "vue";

const historyQuery = ref({
  modelName: "HistoryQuery",
  query: "trousers",
  facets: [],
});
</script>
```