---

title: BaseResultLink

---

# BaseResultLink

Component to be reused that renders an `<a>` wrapping the result contents.

## Props

| Name                | Description                                           | Type                | Default       |
| ------------------- | ----------------------------------------------------- | ------------------- | ------------- |
| <code>result</code> | (Required) The @empathyco/x-types#Result information. | <code>Result</code> | <code></code> |

## Slots

| Name                 | Description                                                              | Bindings<br />(name - type - description)    |
| -------------------- | ------------------------------------------------------------------------ | -------------------------------------------- |
| <code>default</code> | (Required) Link content with a text, an image, another component or both | **result** <code>Result</code> - Result data |

## Events

This component emits the following event:

- [`UserClickedAResult`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)

The component can emit more events on click using the `resultClickExtraEvents` prop.

## Examples

This component is a wrapper for the result contents (images, name, price...). It may be part of the
search result page, recommendations or other section which needs to include results.

Additionally, this component may be injected other events to be emitted on click event, so,
depending where it's used its father component may provide these events.

The result prop is required. It will render an anchor element with the href to the result URL:

```vue
<template>
  <BaseResultLink :result="result">
    <template #default="{ result }">
      <img :src="result.images[0]" alt="Result image" />
      <span>{{ result.name }}</span>
    </template>
  </BaseResultLink>
</template>

<script setup>
import { BaseResultLink } from "@empathyco/x-components";
const result = {
  name: "Jacket",
  url: "https://shop.com/jacket",
  images: ["https://shop.com/jacket.jpg"],
};
</script>
```