HighlightMatch

HighlightMatch is used to highlight a substring of a text.

Demo

Usage

Import the HighlightMatch primitive. Render the text as children of the HighlightMatch, then pass the word you want to highlight to the query prop.

This is the highlighted part.

import { HighlightMatch } from '@aws-amplify/ui-react';

export const HighlightMatchDefaultExample = () => {
  return (
    <HighlightMatch query="highlighted part">
      This is the highlighted part.
    </HighlightMatch>
  );
};

Note: The query for the text is case insensitive.

Styling

Target classes

Class	Description
`amplify-highlightmatch`	Top level element that wraps the HighlightMatch primitive
`amplify-highlightmatch__highlighted`	Class applied to the highlighted text of the HighlightMatch primitive

--amplify-components-highlightmatch-highlighted-font-weight