---

title: RelatedPrompt

---

# RelatedPrompt

This component shows a suggested related prompt.

## Props

| Name                       | Description                                  | Type                       | Default            |
| -------------------------- | -------------------------------------------- | -------------------------- | ------------------ |
| <code>relatedPrompt</code> | The related prompt to render.                | <code>RelatedPrompt</code> | <code></code>      |
| <code>selected</code>      | Indicates if the related prompt is selected. | <code>boolean</code>       | <code>false</code> |

## Slots

| Name                                      | Description                                          | Bindings<br />(name - type - description) |
| ----------------------------------------- | ---------------------------------------------------- | ----------------------------------------- |
| <code>related-prompt-extra-content</code> | The slot to render related prompt extra information. |                                           |

## See it in action

### Basic usage

```vue live
<template>
  <RelatedPrompt :relatedPrompt="relatedPrompt" />
</template>

<script setup>
import { RelatedPrompt } from "@empathyco/x-components/related-prompts";
import { ref } from "vue";

const relatedPrompt = ref({
  suggestionText: "Try shoes",
  suggestionImageUrl: "https://via.placeholder.com/56",
  nextQueries: ["shoes"],
});
</script>
```

### Customizing the extra content slot

```vue live
<template>
  <RelatedPrompt :relatedPrompt="relatedPrompt">
    <template #related-prompt-extra-content="{ relatedPrompt }">
      <span>Extra: {{ relatedPrompt.suggestionText }}</span>
    </template>
  </RelatedPrompt>
</template>

<script setup>
import { RelatedPrompt } from "@empathyco/x-components/related-prompts";
import { ref } from "vue";

const relatedPrompt = ref({
  suggestionText: "Try bags",
  suggestionImageUrl: "",
  nextQueries: ["bags"],
});
</script>
```