Highlight

Highlight given part of a string with mark

Polymorphic

Polymorphic component

Source

LLM docs

Docs

PackageIcon

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 highlights all occurrences of the matched substring.

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.
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

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