# Highlight

> Text with the stretches a search matched marked: a run of `{ text, match }` segments rendered as one inline `<span>`, each matched stretch a native `<mark>` tinted through a semantic color role.

```ts
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

```tsx
<Highlight segments={[{ text: "Remix", match: true }, { text: " routing", match: false }]} />
```

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

## Props

| 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. |