lab components / Text

Text Highlight

Visually emphasizes specific words or phrases within a body of text.

This is a Lab component!

That means it doesn't satisfy our definition of done and may be changed or even deleted. For an exact status, please reach out to the Fancy team through the dev_fancy or ux_fancy channels.

import { TextHighlight } from "@siteimprove/fancylab";

The TextHighlight component visually emphasizes specific words or phrases within a body of text by applying bold styling and a background color, guiding the user's attention and enhancing comprehension.

Is it highlight or HIGHLIGHT or inhighlighting?

CodeHTML output

return (
	<TextHighlight value="Is it highlight or HIGHLIGHT or inhighlighting?" needle="highlight" />
);

#Case Sensitive

The component is case-insensitive, so the effect will be the same whether you use highlight, HIGHLIGHT, or inhighlighting.

Is it highlight or HIGHLIGHT or inhighlighting?

CodeHTML output

return (
	<TextHighlight
		value="Is it highlight or HIGHLIGHT or inhighlighting?"
		needle="highlight"
		caseSensitive
	/>
);

#Color Theme

Text Highlight adapts to both light and dark themes, ensuring visual contrast and readability in different contexts.

You can have light or dark theme, but not bedarkened

The light theme is the default

Check the contrast when used on custom colors

CodeHTML output

return (
	<>
		<ColorThemeExample backgroundColor="#000026" color={ColorWhite}>
			<TextHighlight
				value="You can have light or dark theme, but not bedarkened"
				needle="dark"
				colorTheme="dark"
			/>
		</ColorThemeExample>
		<ColorThemeExample backgroundColor={ColorGrayDark} color={ColorGrayLighter}>
			<TextHighlight
				value="You can have light or dark theme, but not bedarkened"
				needle="dark"
				colorTheme="dark"
			/>
		</ColorThemeExample>
		<ColorThemeExample backgroundColor={ColorGreenDarker} color={ColorGreenLighter}>
			<TextHighlight
				value="You can have light or dark theme, but not bedarkened"
				needle="dark"
				colorTheme="dark"
			/>
		</ColorThemeExample>
		<ColorThemeExample backgroundColor={ColorWhite} color={ColorBlack}>
			<TextHighlight value="The light theme is the default" needle="light" />
		</ColorThemeExample>
		<ColorThemeExample backgroundColor={ColorYellowLighter} color={ColorOrangeDark}>
			<TextHighlight value="Check the contrast when used on custom colors" needle="contrast" />
		</ColorThemeExample>
	</>
);

#Properties

Is it highlight or HIGHLIGHT?

CodePropsHTML output

Property	Description	Defined	Value
needleRequired	`\| string`	YesNo
valueRequired	`\| string`	YesNo
caseSensitiveOptional	`boolean`	YesNo	truefalse
colorThemeOptional	`"dark" \| "light"`	YesNo
classNameOptional	`string`Custom className that's applied to the outermost element (only intended for special cases)	YesNo
styleOptional	`object`Style object to apply custom inline styles (only intended for special cases)	YesNo

Draw attention to key terms, phrases, or data points.
Guide the user's focus in instructional content or tutorials.
Highlight matched search terms or filter results.

#Placement

TextHighlight is typically used in the following places:

Paragraph:To emphasize key information within longer blocks of text, such as issue descriptions or summaries.
Search Results: To highlight matching terms in search results, improving scannability and guiding the user's attention (e.g Search Navigation).
Forms and Instructions: To accentuate important details or requirements within forms or instructional text.

#Style

Siteimprove Design System: Adhere to Siteimprove's guidelines for color, typography, and spacing. If you are not using a component from Fancy, match the styling of your TextHighlight to existing components for visual consistency.
Use Sparingly: Overusing highlights can diminish their effectiveness. Reserve them for truly important content.