# 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>
```
{"metaMigratedAt":"2023-06-16T00:23:53.403Z","metaMigratedFrom":"YAML","title":"ClearHistoryQueries","breaks":true,"contributors":"[{\"id\":\"b7c06ee7-4a03-442c-8093-025d797ad731\",\"add\":2581,\"del\":2390},{\"id\":\"f6284ded-d399-4db7-9c68-cd3b2bc8972d\",\"add\":2390,\"del\":0}]"}