Mark

Highlight part of the text
Import

Usage

Use Mark to highlight part of the text with theme.colors:

Thanks for stopping by and checking out Mantine, you are awesome!
import { Mark, Text } from '@mantine/core';
function Demo() {
return (
<Text>
Thanks for stopping by and checking out <Mark>Mantine</Mark>, you are awesome!
</Text>
);
}

It is used in other Mantine components, for example, in Highlight:

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

Change color

Highlight this chunk of the text
Color
import { Text, Mark } from '@mantine/core';
function Demo() {
return (
<Text>
Highlight <Mark>this chunk</Mark> of the text
</Text>
);
}
Download more icon variants from https://tabler-icons.io/i/search

Mark component props

NameTypeDescription
color
MantineColor
Background color from theme.colors