Highlight

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

OverviewProperties

Import

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

Demo

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

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.

Enable case sensitivity

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

Style inheritance

Highlight inherits from its surrounding context. Any inheritable CSS property not explicitly set by the component flows through from the parent.