---
id: highlight
category: typography
title: Highlight
package: '@chakra-ui/layout'
description: Highlight allows you to highlight substrings of a text.
---
## Import
```js
import { Highlight } from '@chakra-ui/react'
```
## Usage
Render the main string as children of the Highlight component, then pass the
word(s) you want to highlight to the `query` prop. Use the `style` prop to
define the styles for the highlighted parts.
### Highlight a word
```jsx
With the Highlight component, you can spotlight words.
```
### Usage with Heading
The Highlight component can be used within any of the typography components.
Here's an example of how to use it within Heading
```jsx
With the Highlight component, you can spotlight words.
```
### Highlight with multiple words
To highlight multiple phrases that have the same style, pass the substrings you
want to highlight as an array to the `query` prop
```jsx
With the Highlight component, you can spotlight, emphasize and accentuate
words.
```
> The query for the strings is case insensitive. Notice "Accentuate" in the
> query.
### Highlight substrings
The Highlight component allows you to highlight substrings of a word. A good use
case for this is in a search query.
```jsx
Search result for: "spot"
Spotlight bulb
Spot cleaner
Spot ceiling
```
### Customizing rendered elements
In cases where you want to customize multiple rendered elements and their
styles, use the `useHighlight` hook.
```js
import { useHighlight } from '@chakra-ui/react'
```
```jsx
// prettier-ignore
;() => {
const chunks = useHighlight({
text: 'With the Highlight component, you can spotlight, emphasize and accentuate words instantly',
query: ['spotlight', 'emphasize', 'accentuate', 'instantly']
})
return (
{chunks.map(({ match, text }) => {
if (!match) return text
return text === 'instantly' ? (
{text}
) : (
{text}
)
})}
)
}
```