@empathyco/x-components/docs/API-reference/components/common/suggestions/x-components.base-suggestion.md

Empathy X Components

---

title: BaseSuggestion

---

# BaseSuggestion

Renders a button with a default slot. It receives a query, which should be the query of the
module using this component, a suggestion, the XEvent that will be emitted
on click with a given feature.

The default slot receives the suggestion and the matched query has props.

## Props

| Name                                  | Description                                                  | Type                               | Default         |
| ------------------------------------- | ------------------------------------------------------------ | ---------------------------------- | --------------- |
| <code>query</code>                    | The normalized query of the module using this component.     | <code>string</code>                | <code>''</code> |
| <code>suggestion</code>               | The suggestion to render and use in the default slot.        | <code>Suggestion</code>            | <code></code>   |
| <code>feature</code>                  | The feature from which the events will be emitted.           | <code>QueryFeature</code>          | <code></code>   |
| <code>suggestionSelectedEvents</code> | The XEvent that will be emitted when selecting a suggestion. | <code>Partial<XEventsTypes></code> | <code></code>   |
| <code>highlightCurated</code>         | Indicates if the curated suggestion should be highlighted.   | <code>boolean</code>               | <code></code>   |

## Slots

| Name                 | Description    | Bindings<br />(name - type - description)                                                                                                                                                        |
| -------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <code>default</code> | Button content | **query** <code>String</code> - The query that the suggestion belongs to<br />**suggestion** <code>Suggestion</code> - Suggestion data<br />**filter** <code>Filter</code> - Suggestion's filter |

## Events

This component emits the following 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 button. The event payload is the suggestion query
  data.
- [`UserSelectedASuggestion`](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 suggestion data.
- [`UserClickedAFilter`](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 if the suggestion includes a filter. The
  event payload is the suggestion filter.
- The component can emit more events on click using the `suggestionSelectedEvents` prop.

## Examples

### Basic usage

This suggestion component expects a suggestion to render and pass to its default slot, a normalized
query to compare with the suggestion's query and highlight its matching parts, and events to emit
when the suggestion is selected.

If the suggestion contains a filter, it is displayed next to the suggestion.

```vue live
<template>
  <BaseSuggestion :query="query" :suggestion="suggestion" />
</template>

<script setup>
import { BaseSuggestion } from "@empathyco/x-components";
const query = "st";
const suggestion = {
  modelName: "QuerySuggestion",
  query: "steak",
  facets: [
    {
      modelName: "SimpleFacet",
      id: "category",
      label: "Category",
      filters: [
        {
          id: "category:groceries",
          modelName: "SimpleFilter",
          facetId: "category-facet",
          label: "Groceries",
          selected: false,
          totalResults: 10,
        },
      ],
    },
  ],
};
</script>
```

### Customise the content

You can make this component render any content you want by using the `default` slot.

```vue live
<template>
  <BaseSuggestion :query="query" :suggestion="suggestion">
    <template #default="{ suggestion, query, filter }">
      <span>🔍</span>
      <Highlight :text="suggestion.query" :highlight="query" />
      <span v-if="filter">{{ filter.label }}</span>
    </template>
  </BaseSuggestion>
</template>

<script setup>
import { BaseSuggestion } from "@empathyco/x-components";
const query = "st";
const suggestion = {
  modelName: "QuerySuggestion",
  query: "steak",
};
</script>
```

### Emitting custom events with suggestionSelectedEvents

You can emit additional custom events when a suggestion is selected by passing them in the `suggestionSelectedEvents` prop. For example, to emit a custom event called `CustomSuggestionEvent` with a payload:

```vue live
<template>
  <BaseSuggestion
    :query="query"
    :suggestion="suggestion"
    :suggestionSelectedEvents="suggestionSelectedEvents"
  />
</template>

<script setup>
import { BaseSuggestion } from "@empathyco/x-components";
const query = "st";
const suggestion = {
  modelName: "QuerySuggestion",
  query: "steak",
};
const suggestionSelectedEvents = {
  CustomSuggestionEvent: { custom: "payload" },
};
</script>
```