Amplify UI


HighlightMatch is used to highlight a substring of a text.



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.

Note: The query for the text is case insensitive.


Target classes

amplify-highlightmatchTop level element that wraps the HighlightMatch primitive
amplify-highlightmatch__highlightedClass applied to the highlighted text of the HighlightMatch primitive
  • --amplify-components-highlightmatch-highlighted-font-weight

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.