Highlight

Highlight given part of a string with mark tag
Import

Usage

Use Highlight component to highlight substring 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 all matched characters sequence.

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

Highlight This, definitely THIS and also this!
HighlightColor
<Highlight highlight="this">
Highlight This, definitely THIS and also this!
</Highlight>

Highlight multiple substrings

You can highlight multiple substrings by providing an array of values:

Highlight this and also that
<Highlight highlight={['this', 'that']}>Highlight this and also that</Highlight>

Text props

Highlight accepts the same props as Text component:

<Highlight
component="a"
href="https://mantine.dev"
target="_blank"
highlight="mantine"
variant="link"
weight={500}
>
Mantine website
</Highlight>
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback