Design
Component checklist
Up to date
React
Up to date
Overview
The Highlight component offers a focused visual preview of how matching segments of text are emphasized within the user interface. It is designed to visually mark text that aligns with user input, particularly in search and filtering contexts, helping users quickly identify relevant results. With an emphasis on clarity, consistency, and usability, the component ensures a smooth and intuitive experience by presenting highlighted content in a clean and accessible way.
Guidelines
When to use
Use the Highlight component in the following scenarios:
- When you must emphasize matching text segments based on user input, such as during search queries or when applying filters.
- To make it easier for users to visually scan and identify relevant results from a list of items.
- When you want to improve user experience by providing immediate visual feedback in data-heavy or content-rich interfaces.
Avoid using this component for general decoration or unrelated emphasis, as its primary function is to reflect dynamic user interaction.
Best practices
Do
Use the Highlight component to draw attention to matching keywords in filtered or searched content.
Don't
Don't apply multiple highlighting layers or overload it with additional visual elements that may reduce clarity.
Don't
Don't use Highlight as a generic callout for unrelated UI elements.
Accessibility
The component adheres to WCAG 2.2 guidelines regarding contrast and semantic structure. To guarantee readability, all text highlighted by the component maintains at least an AA contrast ratio (4.5:1) against the background.
Icons used within the component are decorative by default and do not interfere with assistive technologies, but they can be enhanced with accessible labels when necessary to convey meaning. These practices ensure a consistent and inclusive experience across diverse user groups.