---

title: ClearHistoryQueries

---

# ClearHistoryQueries

A button that when is pressed, emits the HistoryQueriesXEvents.UserPressedClearHistoryQueries event,
expressing the user intention to clear the whole history of queries.

## Slots

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

## Events

A list of events that the component will emit:

- [`UserPressedClearHistoryQueries`](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.

## Examples

### Basic example

The component exposes a single default slot, where you can add icons or text.

```vue live
<template>
  <div>
    <SearchInput />
    <ClearHistoryQueries>Clear history queries</ClearHistoryQueries>
    <HistoryQueries :animation="'FadeAndSlide'" :maxItemsToRender="10" />
  </div>
</template>

<script>
  import Vue from 'vue';
  import { SearchInput } from '@empathyco/x-components/search-box';
  import { HistoryQueries, ClearHistoryQueries } from '@empathyco/x-components/history-queries';
  import { FadeAndSlide } from '@empathyco/x-components';

  // Registering the animation as a global component
  Vue.component('FadeAndSlide', FadeAndSlide);
  export default {
    name: 'ClearHistoryQueriesDemo',
    components: {
      SearchInput,
      HistoryQueries,
      ClearHistoryQueries
    }
  };
</script>
```