---
title: HistoryQuery
tags: UI reference
---

# HistoryQuery

This component renders a single history query suggestion. It can be used to render two buttons: one to select the
suggestion as the search query, and another one to remove the query suggestion from the history queries.

## Props

| Name | Description | Type | Default |
| ------------ | ------------------------------------------------------ | ------------------- | ------- |
| `suggestion` | _Required_. The history query suggestion to render | `HistoryQueryModel` | None |

## Methods

None

## Slots

| Name | Description | Bindings </br>(name - type - description) |
| --------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| default | History Query content | **suggestion** - `Suggestion`- History Query suggestion data <br/> **queryHTML** -`string`- Suggestion query with the matching part inside an HTML span tag |
| remove-button-content | Content of the button to remove the History Query | **suggestion** - `Suggestion` - History Query suggestion data |

## Events

| Name | Description | Payload | Payload type |
| --------------------------- | ----------------------------------------------------- | -------------------------- | -------------- |
| `UserSelectedAHistoryQuery` | 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

The `HistoryQuery` component only requires a prop called `suggestion` to be rendered.

<HistoryQuery :suggestion="{ query: 'puzzle' }" />

### Play with Events

In this example, an event is triggered when the `HistoryQuery` is clicked, illustrated by the message returning the query selected.

_Click the history query “puzzle” to try it out!_

<HistoryQuery
  :suggestion="{ query: 'puzzle' }"
  @UserSelectedAHistoryQuery="
    (historyQuery) => {
      message = historyQuery.query
    }
  "
/>

### Play with default slot

The default slot allows you to replace the content of the suggestion button. It has two
properties, the suggestion itself, and an HTML string with the matching query.

<HistoryQuery :suggestion="{ query: 'puzzle' }">
  <template #default="{ suggestion, queryHTML }">
    <img src="/assets/icons/history.svg"/>
    <span v-html="queryHTML"/>
  </template>
</HistoryQuery>

### Play with remove-button-content slot

The `remove-button-content` slot allows you to set the content of the
button used to remove the query from the history. This slot only has one property, the
suggestion.

<HistoryQuery :suggestion="{ query: 'puzzle' }">
  <template #remove-button-content="{ suggestion }">
    <img src="/assets/icons/cross-dark.svg"/>
  </template>
</HistoryQuery>