Skip to main content

Highlight

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

    OverviewPropertiesChangelog

    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.

    Still have questions?
    Find answers in the Dynatrace Community