@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.

## See it in action

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 v-bind="{ query, suggestion }" />
</template>
<script>
import { BaseSuggestion } from '@empathyco/x-components'

export default {
  name: 'BaseSuggestionDemo',
  components: {
    BaseSuggestion,
  },
  data() {
    return {
      query: 'st',
      suggestion: {
        modelName: 'QuerySuggestion',
        query: 'steak',
        facet: {
          namedModel: '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 v-bind="{ query, suggestion }" #default="{ suggestion, query, filter }">
    <span>🔍</span>
    <Highlight :text="suggestion.query" :highlight="query" />
    <span v-if="filter">{{ filter.label }}</span>
  </BaseSuggestion>
</template>
<script>
import { BaseSuggestion } from '@empathyco/x-components'

export default {
  name: 'BaseSuggestionDemo',
  components: {
    BaseSuggestion,
  },
  data() {
    return {
      query: 'st',
      suggestion: {
        modelName: 'QuerySuggestion',
        query: 'steak',
      },
    }
  },
}
</script>
```