With the Highlight component, you can spotlight words.
<Text>
<Highlight
query="spotlight"
text="With the Highlight component, you can spotlight words."
/>
</Text>Examples
Multiple
Pass an array of strings to the query prop to highlight multiple substrings.
With the Highlight component, you can spotlight, emphasize and accentuate words.
<Heading>
<Highlight
query={["spotlight", "emphasize", "accentuate"]}
text="With the Highlight component, you can spotlight, emphasize and accentuate words."
colorPalette="teal"
/>
</Heading>Color
Use the colorPalette prop to change the color of the highlighted text.
gray
This is some highlighted text.
orange
This is some highlighted text.
teal
This is some highlighted text.
green
This is some highlighted text.
red
This is some highlighted text.
<div className="grid grid-cols-[8ch_1fr] items-center gap-y-2">
<Text>gray</Text>
<Text>
<Highlight
query="highlighted"
text="This is some highlighted text."
colorPalette="gray"
/>
</Text>
<Text>orange</Text>
<Text>
<Highlight
query="highlighted"
text="This is some highlighted text."
colorPalette="orange"
/>
</Text>
<Text>teal</Text>
<Text>
<Highlight
query="highlighted"
text="This is some highlighted text."
colorPalette="teal"
/>
</Text>
<Text>green</Text>
<Text>
<Highlight
query="highlighted"
text="This is some highlighted text."
colorPalette="green"
/>
</Text>
<Text>red</Text>
<Text>
<Highlight
query="highlighted"
text="This is some highlighted text."
colorPalette="red"
/>
</Text>
</div>