[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [Highlight](./x-components.highlight.md) ## Highlight variable 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... **Signature:** ```typescript _default: import("vue").DefineComponent<{ text: { type: StringConstructor; default: string; }; highlight: { type: StringConstructor; default: string; }; matchClass: { type: StringConstructor; default: string; }; noMatchClass: { type: StringConstructor; default: string; }; matchingPartClass: { type: StringConstructor; default: string; }; }, { hasMatch: import("vue").ComputedRef; matchParts: import("vue").ComputedRef<{ start: string; match: string; end: string; }>; dynamicCSSClasses: import("vue").ComputedRef<{ [x: string]: boolean; 'x-highlight--has-match': boolean; 'x-highlight-text': boolean; }>; }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly>, { text: string; highlight: string; matchClass: string; noMatchClass: string; matchingPartClass: string; }, {}> ```