---
# System prepended metadata

title: ClearHistoryQueries
tags: [UI reference]

---

---
title: ClearHistoryQueries
tags: UI reference
---

# ClearHistoryQueries

This component renders a button that triggers the `UserPressedClearHistoryQueries` event, expressing the user's intention to clear all history queries.

## Props

None

## Methods

None

## Slots

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

## Dynamic Classes

`x-clear-history-queries--is-empty` is a CSS class that is added to the component to allow you to style the component when there aren't any history queries.

## Events

| Name                            | Description                                                      | Payload | Payload type |
| -------------------------------- | ---------------------------------------------------------------- | ------- | ------------ |
| `UserPressedClearHistoryQueries` | The user pressed the button to clear all the history queries | None    | None         |

:::tip X Events
Apart from the specific component events, **base events** can be emitted.  
:::

## See it in action

This example shows how a basic `ClearHistoryQueries` button is rendered.


```vue live
<ClearHistoryQueries>clear all</ClearHistoryQueries>
```

### Play with default slot

Here, the text content of the button has been substituted for an icon.

```vue live
<ClearHistoryQueries>
    <img src="/assets/icons/cross-dark.svg" alt="clear button"/>
</ClearHistoryQueries>
```

### Play with events

The `ClearHistoryQueries` component can trigger an event when the button is pressed to clear all the saved queries.

::: warning

If you don't use the [RemoveHistoryQuery](../history-queries/remove-history-query.md) component, you need to implement the associated event `UserPressedRemoveHistoryQuery`.

:::

_Click the button to try it out and see the message given by the event!_

```vue live
<ClearHistoryQueries
  :historyQuery="{ query: 'query' }"
  @UserPressedClearHistoryQueries="message = 'History cleared'"
>clear all</ClearHistoryQueries>
```

## Extending the component

`ClearHistoryQueries` is commonly used with the [`HistoryQueries`](./history-queries.md) component.

_Type multiple queries in the search input, clear the query, and then click the Clear all button to try it out!_

```vue live
<SearchInput ></SearchInput>
<HistoryQueries></HistoryQueries>
<ClearHistoryQueries>clear all</ClearHistoryQueries>
```
