@empathyco/x-components/docs/API-reference/components/common/x-components.highlight.md

Empathy X Components

---

title: Highlight

---

# Highlight

Highlights the given part of the text. The component is smart enough to do matches
between special characters like tilde, cedilla, eñe, capital letters...

## Props

| Name                           | Description                                                                    | Type                | Default         |
| ------------------------------ | ------------------------------------------------------------------------------ | ------------------- | --------------- |
| <code>text</code>              | The text to highlight some part of it.                                         | <code>string</code> | <code>''</code> |
| <code>highlight</code>         | The part of the text to be highlighted.                                        | <code>string</code> | <code>''</code> |
| <code>matchClass</code>        | CSS Class to add when the `text` string contains the `highlight` string.       | <code>string</code> | <code>''</code> |
| <code>noMatchClass</code>      | CSS Class to add when the given `text` doesn't contain the `highlight` string. | <code>string</code> | <code>''</code> |
| <code>matchingPartClass</code> | CSS Class to add to the matching text.                                         | <code>string</code> | <code>''</code> |

## Events

This component emits no events.

## See it in action

Here you have a basic example of how the highlight component is rendered.

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

```vue live
<template>
  <div>
    <input v-model="highlight" />
    <Highlight :highlight="highlight" text="milanesa" />
  </div>
</template>

<script>
import { Highlight } from '@empathyco/x-components'

export default {
  name: 'HighlightDemo',
  components: {
    Highlight,
  },
  data() {
    return {
      highlight: '',
    }
  },
}
</script>
```

### Customise the layout

This component allows to customise the whole layout. Be careful as due to Vue 2 limitations you can
only render a single root element.

```vue live
<template>
  <div>
    <input v-model="highlight" />
    <Highlight
      :highlight="highlight"
      text="Entraña"
      #default="{ hasMatch, start, match, end, text }"
    >
      <span class="custom-layout" v-if="hasMatch">
        <strong>{{ start }}</strong>
        {{ match }}
        <strong>{{ end }}</strong>
      </span>
      <span v-else>{{ text }}</span>
    </Highlight>
  </div>
</template>

<script>
import { Highlight } from '@empathyco/x-components'

export default {
  name: 'HighlightDemo',
  components: {
    Highlight,
  },
  data() {
    return {
      highlight: 'entran',
    }
  },
}
</script>
```