Highlight

Highlight given part of the string with mark tag

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

Use Highlight component to highlight part in given string with mark tag.

Pass main string as children to Highlight component and string part that should be highlighted to highlight prop. If main string does not include highlight part, it will be ignored. Component ignores trailing whitespace and highlights only first matched characters sequence.

You can change color of mark by passing highlightColor prop with theme color.

Highlight This!

Highlight

Children

HighlightColor

<Highlight highlight="this">
  Highlight This!
</Highlight>

Text props

Highlight accepts the same props as Text component:

Mantine website

<Highlight
  component="a"
  href="https://mantine.dev"
  target="_blank"
  highlight="mantine"
  variant="link"
  weight={500}
>
  Mantine website
</Highlight>