Highlight

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

Import

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

Use cases

CodeSandbox

Highlight multiple terms

To highlight multiple terms at once within the same Highlight component, an array of terms is passed to the component instead.

CodeSandbox

Enable case sensitivity

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

CodeSandbox

Props

HighlightProps

extends

Name	Type	Default	Description
term	| []	-	Either a substring or an array of multiple different substrings that should be highlighted in the projected content. Every occurrence of the string(s) is highlighted accordingly.
caseSensitive?		false	Property that determines whether the highlighting search is case-sensitive. If set to `true`, the component searches for case sensitive occurrences.