---

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>

<script setup>
import { PartialQueryButton } from "@empathyco/x-components/search";
import { ref } from "vue";

const query = ref("shoes");
</script>
```

### Customizing its contents

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

<script setup>
import { PartialQueryButton } from "@empathyco/x-components/search";
import { ref } from "vue";

const query = ref("bags");
</script>
```