Highlight / Mark

Marks search matches inside text with <mark>.

Import

import { Highlight } from '@marbleui/ui'

Props

<Highlight>

Prop	Type	Default	Description
query *required	`string \| string[]`	`—`	Substring(s) to mark, matched case-insensitively.
text *required	`string`	`—`
className	`string`	`—`
markClassName	`string`	`—`

Usage notes

Marks search matches in text with <mark>, for filtered lists and search results. For the search input itself use SearchField.

<Highlight text="Configure the theme provider" query={q} />
<Highlight text={title} query={['match', 'query']} markClassName="bg-accent-soft" />

text must be a plain string. query is a string or an array of strings; matching is case-insensitive and special characters are escaped, so user input is safe.
An empty query renders the text unmarked.
markClassName overrides the default warning-soft mark style; className applies to the wrapping span.
Matches are not announced as such by screen readers beyond the native mark semantics.

Example source · show

import { useState } from 'react'
import { SearchField } from '../search-field'
import { Highlight } from './highlight'

const docs = ['Configure the theme provider', 'Theme tokens and presets', 'Dark mode with class strategy', 'Building a custom theme toggle']

function Live() {
  const [q, setQ] = useState('theme')
  return (
    <div className="flex w-80 flex-col gap-3">
      <SearchField aria-label="Filter docs" value={q} onChange={setQ} />
      <ul className="flex flex-col gap-1.5 text-sm text-fg">
        {docs.map((d) => <li key={d}><Highlight text={d} query={q} /></li>)}
      </ul>
    </div>
  )
}

export const styles = {
  Live,
  Accent: () => <p className="max-w-sm text-sm text-fg"><Highlight text="Search results highlight every match of your query, even multiple terms." query={['match', 'query']} markClassName="bg-accent-soft text-accent-soft-fg" /></p>,
}

Source: packages/ui/src/highlight/highlight.tsx

Catalog