---

title: BaseResultRating

---

# BaseResultRating

This component renders a BaseRating for a result passed as prop.

## Props

| Name                | Description                                         | Type                | Default       |
| ------------------- | --------------------------------------------------- | ------------------- | ------------- |
| <code>result</code> | The @empathyco/x-types#Result to render its rating. | <code>Result</code> | <code></code> |
| <code>link</code>   | A link to redirect when rating is clicked.          | <code>string</code> | <code></code> |

## Slots

| Name                     | Description                          | Bindings<br />(name - type - description) |
| ------------------------ | ------------------------------------ | ----------------------------------------- |
| <code>default</code>     | To override the whole content        | <br />                                    |
| <code>empty-icon</code>  | The content to render as empty icon  | None                                      |
| <code>filled-icon</code> | The content to render as filled icon | None                                      |

## Events

This component emits the following events:

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

## Examples

### Basic example

```vue
<template>
  <BaseResultRating :result="result" />
</template>

<script setup>
import { BaseResultRating } from "@empathyco/x-components";
const result = {
  id: 1,
  name: "Result with rating",
  rating: { value: 3 },
};
</script>
```

### Play with props

#### Custom max value

In this example, the result rating has been configured to 6 as maximum value using the prop `max`.

```vue
<template>
  <BaseResultRating :result="result" :max="6" />
</template>

<script setup>
import { BaseResultRating } from "@empathyco/x-components";
const result = {
  id: 1,
  name: "Result with rating",
  rating: { value: 3 },
};
</script>
```

#### With link

In this example, the result rating has been configured with a link to redirect when is clicked.

```vue
<template>
  <BaseResultRating :result="result" link="https://empathy.co/" />
</template>

<script setup>
import { BaseResultRating } from "@empathyco/x-components";
const result = {
  id: 1,
  name: "Result with rating",
  rating: { value: 3 },
};
</script>
```

### Play with events

In this example, a message has been added to be shown when the result rating is clicked.

```vue
<template>
  <BaseResultRating
    :result="result"
    @UserClickedAResultRating="logUserClickedRating"
  />
</template>

<script setup>
import { BaseResultRating } from "@empathyco/x-components";
const result = {
  id: 1,
  name: "Result with rating",
  rating: { value: 3 },
};
function logUserClickedRating(result) {
  console.log("User clickedRating of this result:", result);
}
</script>
```

## Extending the component

### Custom icons with slots

The rendered icons for rating can be configured through slots. Keep in mind that the icons for both
states (filled and empty), must have the same size make component work properly.

```vue
<template>
  <BaseResultRating :result="result">
    <template #filled-icon>❤️</template>
    <template #empty-icon>🤍</template>
  </BaseResultRating>
</template>

<script setup>
import { BaseResultRating } from "@empathyco/x-components";
const result = {
  id: 1,
  name: "Result with rating",
  rating: { value: 3 },
};
</script>
```

### Override all content

It is possible to override all the content of the component to show your own rating but keeping the
link and event behaviour:

```vue
<template>
  <BaseResultRating :result="result" #default="{ rating, result }">
    <span v-for="star in rating" :key="star">⭐️</span>
    <span>{{ result.name }}</span>
  </BaseResultRating>
</template>

<script setup>
import { BaseResultRating } from "@empathyco/x-components";
const result = {
  id: 1,
  name: "Result with rating",
  rating: { value: 3 },
};
</script>
```

### Reuse BaseRating

It is also possible to reuse our rating component:

```vue
<template>
  <BaseResultRating :result="result" #default="{ rating, result }">
    <BaseRating :value="rating" />
    <span>{{ result.name }}</span>
  </BaseResultRating>
</template>

<script setup>
import { BaseResultRating, BaseRating } from "@empathyco/x-components";
const result = {
  id: 1,
  name: "Result with rating",
  rating: { value: 3 },
};
</script>
```