---

title: Redirection

---

# Redirection

A redirection is a component that sends the user to a link in the website. It is helpful when
there are queries like `help`, `shipping costs`, `my account`, where a link to a section in the
website will be more helpful than the set of results returned.

## Props

| Name                        | Description                                                                         | Type                | Default             |
| --------------------------- | ----------------------------------------------------------------------------------- | ------------------- | ------------------- |
| <code>mode</code>           | The redirection mode. Auto for auto redirection and manual for an user interaction. | <code>string</code> | <code>'auto'</code> |
| <code>delayInSeconds</code> | The waiting time in seconds until the redirection is made.                          | <code>number</code> | <code>0</code>      |

## Slots

| Name                 | Description | Bindings<br />(name - type - description) |
| -------------------- | ----------- | ----------------------------------------- |
| <code>default</code> |             | <br /><br /><br /><br />                  |

## Events

This component emits the following events:

- [`UserClickedARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
  after the user clicks the redirection button.
- [`UserClickedAbortARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
  after the user clicks the abort redirection button.

## Play with the component

In this example, a query has been searched in the search input resulting in a case where the
response has a redirection.

A text box appears below the search box indicating that you're going to be redirected to another
web page.

This component has two modes:

- Auto mode means that the redirection will occur after a certain number of seconds passed as a
  property.
- If the value is 0 the redirection will be instant.
- Manual mode means that the user has to click the redirect button or nothing will happen.

_Type any term in the input field to try it out!_

```vue
<template>
  <Redirection #default="{ redirection, redirect, abortRedirect }">
    <span>In a few seconds you're going to be redirected!</span>
    <span>{{ redirection.url }}</span>
    <button @click="redirect">Redirect now!</button>
    <button @click="abortRedirect">Abort redirection!</button>
  </Redirection>
</template>

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

## Extending the component

Components behaviour can be changed, in this example the mode of the component will be manual
forcing the user to accept the redirection

```vue
<template>
  <Redirection mode="manual" #default="{ redirection, redirect }">
    <span>{{ redirection.url }}</span>
    <button @click="redirect">Redirect now!</button>
  </Redirection>
</template>

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