---
title: Highlight
description: Used to highlight substrings of a text.
links:
  source: components/highlight
  storybook: typography-highlight--basic
  recipe: highlight
  ark: https://ark-ui.com/react/docs/utilities/highlight
---

<ExampleTabs name="highlight-basic" />

## Usage

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

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

## Examples

### Multiple

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

<ExampleTabs name="highlight-multiple" />

### Custom Style

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

<ExampleTabs name="highlight-with-custom-style" />

### Search Query

Use the highlight component to highlight search query results.

<ExampleTabs name="highlight-search-query" />

### With Squiggle

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

<ExampleTabs name="highlight-with-squiggle" />

## Props

<PropTable component="Highlight" part="Highlight" />
