---

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>
```