Highlight

Used to highlight substrings of a text.

AI TipWant to skip the docs? Use the MCP Server

With the Highlight component, you can spotlight words.

Usage

import { Highlight } from "@chakra-ui/react"

<Highlight query="Hello">Hello World</Highlight>

Pass an array of strings to the query prop to highlight multiple substrings.

Use the styles prop to customize the style of the highlighted text.

With the Highlight component, you can spotlight words.

Use the highlight component to highlight search query results.

Search result for: spot

Spotlight bulb

Spot cleaner

Spot ceiling

Here's an example of how to render a custom squiggle image around the highlighted text. Useful for a more fancy effect.

Prop	Default	Type
`query` *		`string \| string[]` The query to highlight in the text
`text` *		`string` The text to highlight
`styles`		`SystemStyleObject \| undefined`
`ignoreCase`		`boolean` Whether to ignore case while matching
`matchAll`		`boolean` Whether to match multiple instances of the query
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.