---

title: QueryPreviewButton

---

# QueryPreviewButton

Component containing an event button that emits QueriesPreviewXEvents.UserAcceptedAQueryPreview when
clicked with the full query preview info as payload.

It has a default slot to customize its contents.

## Props

| Name                          | Description                                                  | Type                                          | Default       |
| ----------------------------- | ------------------------------------------------------------ | --------------------------------------------- | ------------- |
| <code>queryPreviewInfo</code> | The information about the request of the query preview.      | <code>QueryPreviewInfo</code>                 | <code></code> |
| <code>metadata</code>         | The metadata property for the request on each query preview. | <code>Omit<WireMetadata, 'moduleName'></code> | <code></code> |

## Slots

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

## Examples

### Basic example

The component content has the query preview query as default

```vue
<template>
  <div>
    <QueryPreviewButton queryPreviewInfo="queryPreviewInfo" />
  </div>
</template>

<script>
  import { QueryPreviewButton } from '@empathyco/x-components/queries-preview';

  export default {
    components: {
      QueryPreviewButton
    },
    data: function () {
      return {
        queryPreviewInfo: {
          query: 'shoes'
        }
      };
    }
  };
</script>
```

### Customizing slots

The content of the button is customizable via its default slot

```vue
<template>
  <div>
    <QueryPreviewButton queryPreviewInfo="queryPreviewInfo">
      {{ `Search for: ${queryPreviewInfo.query}` }}
    </QueryPreviewButton>
  </div>
</template>

<script>
  import { QueryPreviewButton } from '@empathyco/x-components/queries-preview';

  export default {
    components: {
      QueryPreviewButton
    },
    data: function () {
      return {
        queryPreviewInfo: {
          query: 'shoes'
        }
      };
    }
  };
</script>
```

## Events

A list of events that the component will emit:

- `UserAcceptedAQueryPreview`: the event is emitted after the user clicks the button. The event
  payload is the `QueryPreviewInfo` of the query.