[ @sdxc/ui ]

Highlight

Text with the stretches a search matched marked.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

View code

<Link href="/guides/routing">
	<Highlight
		segments={[
			{ text: "Typed ", match: false },
			{ text: "routes", match: true },
			{ text: " for every ", match: false },
			{ text: "route", match: true },
		]}
	/>
</Link>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { Highlight } from "@sdxc/ui";

Renders the segments inline, each match as a <mark> with a quiet tint behind text that keeps the surrounding color and weight, so a match inside a link still reads as the link. A mark broken across lines keeps its rounded tint on every fragment.

Examples

<Link href={post.href}><Highlight segments={post.title} color="warning" /></Link>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Description
`segments`	`ReadonlyArray<Segment>`	The text in order, split where the matches start and end.
`color?`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	Semantic color role of the marks. Defaults to DEFAULT_COLOR.

Also accepts everything in Omit<TagProps<"span">, "children">.

Types

Name	Values	What it decides
`Color`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	Semantic color role the marks are tinted with.