---
name: TextHighlight
package: '@wordpress/components'
category: Typography
status: stable
canonical: 'https://system.automattic.design/components/texthighlight/'
storybook: 'https://wordpress.github.io/gutenberg/?path=/docs/components-texthighlight--docs'
github: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/text-highlight'
---

# TextHighlight

Highlights occurrences of a given string within another string of text. Wraps
each match with a `<mark>` tag which provides browser default styling.

```tsx
import { TextHighlight } from '@wordpress/components';
```

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `highlight` *(required)* | `string` | `''` | The string to search for and highlight within the `text`. Case insensitive. Multiple matches. |
| `text` *(required)* | `string` | `''` | The string of text to be tested for occurrences of then given `highlight`. |


## Examples

### Default

```tsx
const Default = () => {
    return (
        <TextHighlight
            text="We call the new editor Gutenberg. The entire editing experience has been rebuilt for media rich pages and posts."
            highlight="Gutenberg" />
    );
};
```