@empathyco/x-components/docs/API-reference/components/search/x-components.partial-query-button.md

Empathy X Components

---

title: PartialQueryButton

---

# PartialQueryButton

A button that when pressed emits the XEventsTypes.UserAcceptedAQuery
and SearchXEvents.UserClickedPartialQuery events, expressing the user
intention to set the partial query.

## Props

| Name               | Description         | Type                | Default       |
| ------------------ | ------------------- | ------------------- | ------------- |
| <code>query</code> | The query property. | <code>string</code> | <code></code> |

## Slots

| Name                 | Description | Bindings<br />(name - type - description) |
| -------------------- | ----------- | ----------------------------------------- |
| <code>default</code> |             |                                           |

## Events

This component emits 2 different events:

- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted after the user clicks the partial query. The event payload is the partial
  query data.
- [`UserClickedPartialQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted after the user clicks the partial query. The event payload is the partial
  query data.

## Examples

### Basic example

A button that when pressed emits the `XEventsTypes.UserAcceptedAQuery` and
`SearchXEvents.UserClickedPartialQuery` events, expressing the user intention to set the partial
query.

The component sets the current query as the new query and emits the `UserAcceptedAQuery` and
`UserClickedPartialQuery` events when is clicked.

```vue
<template>
  <PartialQueryButton :query="query" />
</template>
```

### Customizing its contents

```vue
<template>
  <PartialQueryButton>
    <template #default="{ query }">
      <span class="x-partial-query-button__text">
        Set the Partial query as the new query: {{ query }}!
      </span>
    </template>
  </PartialQueryButton>
</template>

<script>
import { PartialQueryButton } from '@empathyco/x-components/search'

export default {
  components: {
    PartialQueryButton,
  },
}
</script>
```