# Highlight

Status: stable. Added in Components 1.2.0.

Query-based substring highlighting using Mark.

## Import

```tsx
import { Highlight } from '@oztix/roadie-components'
```

## Examples

### Default

```tsx

<p>
  <Highlight
    text='The quick brown fox jumps over the lazy dog'
    query='quick'
  />
</p>
```

### Intents

The default intent is `info`.

```tsx
<p>
  <Highlight text='Neutral intent highlight' query='Neutral' intent='neutral' />
</p>
<p>
  <Highlight text='Accent intent highlight' query='Accent' intent='accent' />
</p>
<p>
  <Highlight text='Brand intent highlight' query='Brand' intent='brand' />
</p>
<p>
  <Highlight text='Info intent highlight' query='Info' intent='info' />
</p>
<p>
  <Highlight text='Success intent highlight' query='Success' intent='success' />
</p>
<p>
  <Highlight text='Warning intent highlight' query='Warning' intent='warning' />
</p>
<p>
  <Highlight text='Danger intent highlight' query='Danger' intent='danger' />
</p>
```

### With multiple queries

```tsx

<p>
  <Highlight
    text='React, Vue, and Svelte are popular JavaScript frameworks'
    query={['React', 'Vue', 'Svelte']}
  />
</p>
```

### With case sensitivity

By default, matching is case-insensitive.

```tsx
{/* Case insensitive (default) */}
<p>
  <Highlight text='Hello World' query='hello' />
</p>
{/* Case sensitive */}
<p>
  <Highlight text='Hello World' query='hello' ignoreCase={false} />
</p>
```

### With match first only

By default, all occurrences are highlighted.

```tsx
{/* Match all (default) */}
<p>
  <Highlight text='foo bar foo baz foo' query='foo' matchAll={true} />
</p>
{/* Match first only */}
<p>
  <Highlight text='foo bar foo baz foo' query='foo' matchAll={false} />
</p>
```

## API reference

### Highlight

```tsx
import { Highlight } from '@oztix/roadie-components/highlight'
```

- `text`: `string`. Required.
- `query`: `string | string[]`. Required.
- `ignoreCase`: `boolean`. Defaults to `true`.
- `matchAll`: `boolean`. Defaults to `true`.
- `className`: `string`.
- `intent`: `"neutral" | "neutral-inverted" | "brand" | "brand-secondary" | "brand-blue" | "brand-orange" | "brand-purple" | "accent" | "danger" | "success" | "warning" | "info" | null`.
- `as`: `"mark"`. Deprecated: Use `render` instead. `as` will be removed in v3.0.0.
- `render`: `RoadieRenderProp`. Escape hatch — swap the underlying element with full control over the rendered shape (e.g. `render={<h2 />}` to highlight a heading).

Docs updated 19 Oct 2026.