---
title: RemoveHistoryQuery
tags: UI reference
---

# RemoveHistoryQuery

This component renders the button to emit the `UserPressedRemoveHistoryQuery` event, expressing the user's intention to remove a single query from the history queries.

## Props

| Name | Description | Type | Default |
| ------------ | ------------------------------------------------------------------------------------ | ------------ | ------- |
| historyQuery | _Required_. The historyQuery removed when clicking the clear button | HistoryQuery | None |

## Methods

None

## Slots

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

## Events

| Name | Description | Payload | Payload type |
| ------------------------------- | ----------------------------------------------------- | -------------------------- | -------------- |
| `UserPressedRemoveHistoryQuery` | Event emitted after the user clicks the button | The selected history query | `HistoryQuery` |

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

## See it in action

This example shows how the button to remove a single history query can be rendered without any additional effects.

<RemoveHistoryQuery :historyQuery="{}">✕</RemoveHistoryQuery>

### Play with Props

In this example, the single history query to be removed is indicated by passing it in props.

<RemoveHistoryQuery
  :historyQuery="{ query: 'puzzle' }"
>remove</RemoveHistoryQuery>

### Play with Events

In this example, you can trigger the `UserPressedRemoveHistoryQuery` event when you click on it, illustrated by a message giving the history query name.

_Click the button that removes the query to try it out!_

<RemoveHistoryQuery
  :historyQuery="{ query: 'puzzle' }"
  @UserPressedRemoveHistoryQuery="
    (historyQuery) => {
      message = historyQuery.query
    }
  "
>remove</RemoveHistoryQuery>

### Play with default slot

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

<RemoveHistoryQuery :historyQuery="{ query: 'query' }">
    <img src="/assets/icons/cross-dark.svg"/>
</RemoveHistoryQuery>

## Extending the component

This example uses the base [HistoryQuery](./history-query.md) component, but `RemoveHistoryQuery` has been added to remove the query.

<HistoryQuery :suggestion="{ query: 'toy' }">
    <template #remove-button-content="{ suggestion }">
        <RemoveHistoryQuery :historyQuery="suggestion">✕</RemoveHistoryQuery>
    </template>
</HistoryQuery>