Highlight

Status

Stable

Added

Components 1.2.024 Nov 2025

Docs updated

19 Oct 2026

Query-based substring highlighting using Mark.

Import

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

Examples

Default

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

Intents

The default intent is info.

<p>
  <Highlight text='Neutral intent highlight' query='Neutral' intent='neutral' />
</p>
<p>
  <Highlight text='Accent intent highlight' query='Accent' intent='accent' />
</p>

With multiple queries

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

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

With match first only

By default, all occurrences are highlighted.

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

API reference

Highlight

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

Query-based substring highlighting using Mark.

Import

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

Examples

Default

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

Intents

The default intent is info.

<p>
  <Highlight text='Neutral intent highlight' query='Neutral' intent='neutral' />
</p>
<p>
  <Highlight text='Accent intent highlight' query='Accent' intent='accent' />
</p>

With multiple queries

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

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

With match first only

By default, all occurrences are highlighted.

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

API reference

Highlight

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