UI kit reference

components/Highlighted

import { … } from 'zidane-ui'ui/src/components/Highlighted.tsx

Breadcrumb (long path truncates left)

EditableTitle (double-click)

Rate limit the chat endpoint

DiffCounts, RowBadge, Highlighted

+14−2+120−8mergeddraft3 filessession-title.ts

SegmentSpinner

ZidaneMark

Components#

`Highlighted`Component#

text with the characters at indices (a search match) in the accent. One inline box, so a flex or grid parent lays it out as one item, not one per run. Offsets are UTF-16 positions, and an emoji counts as matched when either of its units is.

TypeScript

function Highlighted(props: HighlightedProps): Element

Parameters

Parameters
Name	Type	Description
props	`HighlightedProps`	Component props.

Returns

Element

Props

Highlighted props
Name	Type	Description
className?	`string`	Extra classes on the wrapping `span`.
indices	`readonly number[]`	UTF-16 offsets in `text` of the characters to highlight, as a string matcher reports them. An empty list renders `text` plain.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.
text	`string`	The full text to render.

ui/src/components/Highlighted.tsx:25

Interfaces#

`HighlightedProps`Interface#

Props for Highlighted.

TypeScript

interface HighlightedProps

Properties

HighlightedProps properties
Name	Type	Description
className?	`string`	Extra classes on the wrapping `span`.
indices	`readonly number[]`	UTF-16 offsets in `text` of the characters to highlight, as a string matcher reports them. An empty list renders `text` plain.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.
text	`string`	The full text to render.

ui/src/components/Highlighted.tsx:4