Highlight

The Highlight component allows you to highlight specific words or phrases within a text. It supports multiple search queries, case-insensitive matching, and customizable color schemes.

Demo

React
Vue

Color Scheme

Ignore Case

Match All

Query (will be highlighted in the text below)

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.

// Import component
import { Highlight } from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/highlight.css';

return (
  <Highlight
    text="Lorem ipsum dolor sit amet"
    query="sit amet"
  />
);

<script setup lang="ts">
// Import component
import { Highlight } from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/highlight.css';
</script>

<template>
  <Highlight
    text="Lorem ipsum dolor sit amet"
    query="sit amet"
  />
</template>

Props

React
Vue

Name	Type	Required	Default	Description
`text`	`string`	Yes	—	The text to highlight
`query`	`string \| string[]`	Yes	—	Text or array of texts to search for
`colorScheme`	`ColorScheme`		—	Color scheme for highlighted text
`ignoreCase`	`boolean`		`false`	Whether to ignore case when matching
`matchAll`	`boolean`		`false`	If true and multiple queries, match all at once

Name	Type	Required	Default	Description
`text`	`string`	Yes	—	The text to highlight
`query`	`string \| string[]`	Yes	—	Text or array of texts to search for
`color-scheme`	`ColorScheme`		—	Color scheme for highlighted text
`ignore-case`	`boolean`		`false`	Whether to ignore case when matching
`match-all`	`boolean`		`false`	If true and multiple queries, match all at once

Types

type ColorScheme = 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'