Highlight | Mantine

Usage

Use the Highlight component to highlight substrings within text using the HTML <mark> element.

Pass the text as children and specify which substring(s) to highlight with the highlight prop. Matching is case-insensitive and accent-insensitive by default, and highlights all occurrences of the matched substring. Use the caseInsensitive and accentInsensitive props to opt out.

Highlight This, definitely THIS and also this!

Color

Highlight

Children

import { Highlight } from '@mantine/core';

function Demo() {
  return (
    <Highlight highlight="this">
      Highlight This, definitely THIS and also this!
    </Highlight>
  );
}

Matching behavior

Case-insensitive: 'hello' matches 'Hello', 'HELLO', 'hElLo', etc. (controlled by caseInsensitive, defaults to true)
Accent-insensitive: 'cafe' matches 'café', 'cafè', 'CAFÉ', etc. (controlled by accentInsensitive, defaults to true)
All occurrences: Every instance of the matched substring is highlighted
Special characters: Regex special characters like [, ], (, ) are automatically escaped and treated as literal text
Whitespace: Leading and trailing whitespace in highlight strings is trimmed and ignored
Empty strings: Empty or whitespace-only highlight strings are ignored

Case-sensitive matching

Set caseInsensitive={false} to only match substrings with the same casing as the highlight term:

With case-insensitive matching (default)

Highlight This, definitely THIS and also this!

With case-sensitive matching (caseInsensitive={false})

Highlight This, definitely THIS and also this!

import { Highlight, Stack, Text } from '@mantine/core';

function Demo() {
  return (
    <Stack gap="md">
      <div>
        <Text size="sm" fw={500} mb={5}>
          With case-insensitive matching (default)
        </Text>
        <Highlight highlight="this">Highlight This, definitely THIS and also this!</Highlight>
      </div>

      <div>
        <Text size="sm" fw={500} mb={5}>
          {'With case-sensitive matching (caseInsensitive={false})'}
        </Text>
        <Highlight highlight="this" caseInsensitive={false}>
          Highlight This, definitely THIS and also this!
        </Highlight>
      </div>
    </Stack>
  );
}

Accent-sensitive matching

Set accentInsensitive={false} to require accented characters in the text to match the highlight term exactly:

With accent-insensitive matching (default)

We visited café and cafe.

With accent-sensitive matching (accentInsensitive={false})

We visited café and cafe.

import { Highlight, Stack, Text } from '@mantine/core';

function Demo() {
  return (
    <Stack gap="md">
      <div>
        <Text size="sm" fw={500} mb={5}>
          With accent-insensitive matching (default)
        </Text>
        <Highlight highlight="cafe">We visited café and cafe.</Highlight>
      </div>

      <div>
        <Text size="sm" fw={500} mb={5}>
          {'With accent-sensitive matching (accentInsensitive={false})'}
        </Text>
        <Highlight highlight="cafe" accentInsensitive={false}>
          We visited café and cafe.
        </Highlight>
      </div>
    </Stack>
  );
}

Highlight multiple substrings

To highlight multiple substrings, provide an array of values. When multiple substrings are provided, longer matches take precedence to avoid partial overlaps.

Highlight this and also that

import { Highlight } from '@mantine/core';

function Demo() {
  return <Highlight highlight={['this', 'that']}>Highlight this and also that</Highlight>;
}

Custom colors per term

You can assign different colors to different highlighted terms by providing an array of objects with text and color properties:

Error: Invalid input. Warning: Check this field. Success: All tests passed.

import { Highlight } from '@mantine/core';

function Demo() {
  return (
    <Highlight
      highlight={[
        { text: 'error', color: 'red' },
        { text: 'warning', color: 'yellow' },
        { text: 'success', color: 'green' },
      ]}
    >
      Error: Invalid input. Warning: Check this field. Success: All tests passed.
    </Highlight>
  );
}

Whole word matching

Use the wholeWord prop to match only complete words. When enabled, 'the' will not match 'there' or 'theme':

With whole word matching (wholeWord={true})

The theme is there

Without whole word matching (default)

The theme is there

import { Highlight, Stack, Text } from '@mantine/core';

function Demo() {
  return (
    <Stack gap="md">
      <div>
        <Text size="sm" fw={500} mb={5}>
          With whole word matching (wholeWord={'{'}true{'}'})
        </Text>
        <Highlight highlight="the" wholeWord>
          The theme is there
        </Highlight>
      </div>

      <div>
        <Text size="sm" fw={500} mb={5}>
          Without whole word matching (default)
        </Text>
        <Highlight highlight="the">The theme is there</Highlight>
      </div>
    </Stack>
  );
}

Change highlight styles

Default Mark styles can be overwritten with the highlightStyles prop, which accepts either an object with styles or a function that receives the theme as a parameter and returns styles:

You can change styles of highlighted part if you do not like default styles

import { Highlight } from '@mantine/core';

function Demo() {
  return (
    <Highlight
      ta="center"
      highlight={['highlighted', 'default']}
      highlightStyles={{
        backgroundImage:
          'linear-gradient(45deg, var(--mantine-color-cyan-5), var(--mantine-color-indigo-5))',
        fontWeight: 700,
        WebkitBackgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
      }}
    >
      You can change styles of highlighted part if you do not like default styles
    </Highlight>
  );
}

Text props

Highlight is based on the Text component - all Text props except color are available. Use the color prop to change the highlight background color, not the text color.

Mantine website

import { Highlight } from '@mantine/core';

function Demo() {
  return (
    <Highlight
      component="a"
      href="https://mantine.dev"
      target="_blank"
      highlight="mantine"
      fw={500}
      c="var(--mantine-color-anchor)"
    >
      Mantine website
    </Highlight>
  );
}

Code

List