@empathyco/x-components/docs/API-reference/components/next-queries/x-components.next-query.md

Empathy X Components

---

title: NextQuery

---

# NextQuery

Renders a next query item which receives the suggestion that will be rendered as a prop. It
exposes a default slot to change the next query content. If the slot is not overridden,
it will render the suggestion query by default.

## Props

| Name                          | Description                                                | Type                        | Default            |
| ----------------------------- | ---------------------------------------------------------- | --------------------------- | ------------------ |
| <code>suggestion</code>       | The suggestion to render and use in the default slot.      | <code>NextQueryModel</code> | <code></code>      |
| <code>highlightCurated</code> | Indicates if the curated next query should be highlighted. | <code>boolean</code>        | <code>false</code> |

## Slots

| Name                 | Description        | Bindings<br />(name - type - description)                                                                                                                                                                                                                                                                                                          |
| -------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
| <code>default</code> | Next Query content | **shouldHighlightCurated** <code>boolean</code> - True if the curated NQ should be highlighted<br />**v-bind** <code>Object</code> - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter \\ | undefined</code> - Suggestion's filter |

## Dynamic Classes

`NextQuery` uses the following dynamic CSS classes so you can style it when is:

- Curated: `x-next-query--is-curated`.

## Events

A list of events that the component will emit:

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

## Examples

This components expects just a suggestion as a prop to be rendered. It has a slot to override the
content. By default, it renders the suggestion query of the next query. It also has an optional
prop, `highlightCurated`, to indicate if the curated Next Queries should be differentiated with a
CSS class.

### Basic Usage

Using default slot:

```vue live
<template>
  <NextQuery :suggestion="suggestion" />
</template>

<script>
import { NextQuery } from '@empathyco/x-components/next-queries'

export default {
  name: 'NextQueryDemo',
  components: {
    NextQuery,
  },
  data() {
    return {
      suggestion: {
        modelName: 'NextQuery',
        query: 'tshirt',
        facets: [],
      },
    }
  },
}
</script>
```

### Overriding default slot.

The default slot allows you to replace the content of the suggestion button.

```vue live
<template>
  <NextQuery :suggestion="suggestion">
    <template #default="{ suggestion }">
      <TrendingIcon />
      <span class="x-next-query__query" :aria-label="suggestion.query">{{ suggestion.query }}</span>
    </template>
  </NextQuery>
</template>

<script>
import { NextQuery } from '@empathyco/x-components/next-queries'
import { TrendingIcon } from '@empathyco/x-components'

export default {
  name: 'NextQueryDemo',
  components: {
    NextQuery,
    TrendingIcon,
  },
  data() {
    return {
      suggestion: {
        modelName: 'NextQuery',
        query: 'tshirt',
        facets: [],
      },
    }
  },
}
</script>
```