Highlight

A utility component that automatically highlights matching text patterns within content, useful for search results and text emphasis.

Anatomy

<script>
  import { Highlight } from "@saas-ui/svelte/typography/highlight";
</script>

<!-- Basic highlight -->
<Highlight
  query="spotlight"
  text="With the Highlight component, you can spotlight words."
/>

<!-- Multiple queries -->
<Highlight
  query={["hello", "world"]}
  text="Hello world, hello everyone!"
/>

<!-- Case insensitive -->
<Highlight
  query="react"
  text="React is a library for building React apps"
  ignoreCase
/>

Examples

Basic Accessibility

Basic highlight with default styling for emphasizing matching text patterns.

<Highlight
	query="spotlight"
	text="With the Highlight component, you can spotlight words."
	variant="subtle"
	colour="orange"
/>

Custom Style Accessibility

Use the variant and colour props to customize the highlight appearance.

<Highlight
	query="component"
	variant="text"
	text="With the Highlight component, you can spotlight words."
/>

Mark Class Accessibility

Use markClass to apply custom CSS classes to the highlighted text for advanced styling.

<Highlight
	query="custom"
	variant="plain"
	text="Use markClass to apply custom styling to highlighted text."
	markClass="underline decoration-2 decoration-pink-500"
/>

Multiple Accessibility

Highlight multiple words by passing an array to the query prop.

<Heading size="lg">
	<Highlight
		query={["spotlight", "emphasise", "accentuate"]}
		text="With the Highlight component, you can spotlight, emphasise and accentuate words."
		variant="subtle"
		colour="teal"
	/>
</Heading>

Search Query Accessibility

Use ignoreCase for case-insensitive search highlighting, ideal for search results.

{@const query = "spot"}
{@const results = ["Spotlight bulb", "Spot cleaner", "Spot ceiling"]}
<Stack>
	<Text>Search result for: spot</Text>
	<Stack>
		{#each results as item}
			<Highlight ignoreCase {query} variant="text" text={item} />
		{/each}
	</Stack>
</Stack>

Props

Prop	Type	Default	Description
`query`	`text`	-	-
`text`	`text`	-	-
`ignoreCase`	`boolean`	`false`	-
`matchAll`	`boolean`	`true`	-
`variant`	`subtle \| solid \| text \| plain`	`subtle`	-
`colour`	`accent \| gray \| zinc \| neutral \| stone \| slate \| red \| orange \| amber \| yellow \| lime \| green \| emerald \| teal \| cyan \| sky \| blue \| indigo \| violet \| purple \| fuchsia \| pink \| rose`	`gray`	The colour theme of the component.
`markClass`	`text`	-	Additional CSS classes to apply to the highlighted text
`class`	`text`	-	Additional CSS classes to apply.