Highlight

Use the Highlight component to highlight one or more substrings within a text.

OverviewProperties

Import

import { Highlight } from '@dynatrace/strato-components/typography';

Use cases

Render the appropriate text as children of the Highlight component and pass the substring you want to highlight to the term prop.

CodeSandbox

Highlight multiple terms

To highlight multiple terms within the same Highlight component, pass the substrings you want to highlight as an array to the term prop.

CodeSandbox

Enable case sensitivity

Use the caseSensitive prop to determine whether the search for the specified terms should be case-sensitive.

CodeSandbox