---

title: BaseRating

---

# BaseRating

Rating component. This component renders a set of elements filled based on the value passed as
prop.

## Props

| Name               | Description                                                        | Type                | Default        |
| ------------------ | ------------------------------------------------------------------ | ------------------- | -------------- |
| <code>value</code> | Numeric value used to calculates the width of the filled elements. | <code>number</code> | <code></code>  |
| <code>max</code>   | Maximum number of elements to paint.                               | <code>number</code> | <code>5</code> |

## Slots

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

## Examples

This component receives a `value` as prop and renders a set of elements, which will be filled based
on this value.

### Basic usage

```vue
<template>
  <BaseRating :value="5.23" />
</template>

<script setup>
import { BaseRating } from "@empathyco/x-components";
</script>
```

### Customizing its contents

```vue
<template>
  <BaseRating :value="7.15" :max="10">
    <template #filled-icon>
      <TestIcon />
    </template>
    <template #empty-icon>
      <TestIcon />
    </template>
  </BaseRating>
</template>

<script setup>
import { BaseRating } from "@empathyco/x-components";
import TestIcon from "./TestIcon.vue";
</script>
```